【问题标题】:Res.render, possible to create a controller?Res.render,可以创建控制器吗?
【发布时间】:2016-09-13 04:55:06
【问题描述】:

我使用这种平均堆栈结构:https://github.com/meanjs/mean

目前我使用res.render如下:

res.render('modules/core/server/views/index', {
  user: safeUserObject,
});

是否可以将其分配给 angularjs 控制器?

我不知道如何用我目前的结构来做到这一点。

更新:

我设法让控制器工作,但我无法从中获取数据? 我还需要将头控制器作为根范围。

代码:

  function HeaderController($scope, $state, Authentication, menuService) {
var vm = this;

vm.accountMenu = menuService.getMenu('account').items[0];
vm.authentication = Authentication;

vm.datatest = 200000;
$scope.datatest = 200001;
console.log("loaded , maybe possible4?");

}

console.log 已执行,但我找不到任何值。

客户:

<div ng-controller="HeaderController">

<font style="color:white;">{{ vm.datatest }} {{ datatest }} {{ datatest }}</font>

</div>

一些调试:

【问题讨论】:

  • 您的模板应该定义控制器。 ng-controller 在你的 HTML 中,或者使用角度路由来定义哪个控制器映射到模板
  • 我想到了@SterlingArcher,但我不知道我应该如何使用我使用的结构(我链接到的)来做到这一点
  • github.com/meanjs/mean/blob/master/modules/users/client/config/… 看看这个页面,这是他配置角度路由的地方
  • 您可以正常分配角度控制器,使用ng-controller
  • @SterlingArcher 我确实看过,但那是针对 ui 视图的。我需要一个分配给主布局的控制器,该控制器也总是被渲染。

标签: javascript angularjs node.js express mean-stack


【解决方案1】:

如果要将其分配给 vm,则应使用 controllerAs 语法。

<div ng-controller="HeaderController as vm">
    <span>{{vm.data}}</span>
</div>

要在父控制器和子控制器之间共享数据,请使用服务/工厂或将数据分配给 $rootScope。使用 $rootScope 的示例:

//parent controller
function HeaderController ($rootScope) {
    var vm  = this;
    $rootScope.data = 'This is a string';
    //inject $rootScope into child controllers to get or set $rootScope.data
}

//child controller
function ChildController ($rootScope) {
    var vm = this;
    vm.data = $rootScope.data;
}

在大多数情况下,首选方式是使用服务或工厂:

//parent controller
function HeaderController (factory) {
    var vm = this;
    vm.data = 'This is a string';
    factory.set(vm.data);
    //set data in factory from parent controller 
}

//child controller
function ChildController (factory) {
    var vm = this;
    vm.data = factory.get();
    //get data from factory set in child controller
}

//basic example factory
function factory () {
    var data;
    var factory = {
        get: get,
        set: set
    }
    return factory;

    function get () { return data; }
    function set (item) { data = item; }
}

在配置块中渲染主模板和部分使用 $routeProvider:

app.config(function ($routeProvider) {
    $routeProvider
    .when('/', {templateUrl: 'main' })
    .when('/:template, {
        templateUrl: function (urlattr) {
            return urlattr.template;
        }
    });
});

在 express 中定义路线:

router.get('/', function (req, res ,next) {
    res.render('main')
})

router.get('/:template', function (req, res, next) {
    res.render(req.params.template)
})

当向根发出请求时,这将呈现主模板。例如,当使用 $location.path('index') 更改 Angular 路由时,会向 express 中的 '/:template' 路由发出请求,它将在您的视图文件夹中查找名为 'index 的模板并呈现为部分,同时保留渲染的“主”模板。

希望这是有道理的。

【讨论】:

  • 我无法得到结果:prntscr.com/ch9w0i {{ vm.datatest }} 不起作用。根据上面的例子。
  • 确保您的字体标签嵌套在具有控制器定义的 div 下。
  • 它是@Zofskeez 控制器在身体中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-04
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
  • 1970-01-01
相关资源
最近更新 更多