角的＆QUOT; controllerAs＆QUOT;在routeProvider不工作 [英] Angular's "controllerAs" not working in routeProvider

问题描述

我想使用一个 $ routeProvider 路线 controllerAs 属性没有任何成功。

I am trying to use the controllerAs property on a $routeProvider route without any success.

下面是示例code：

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider) {
  $routeProvider
    .when('/', {
      template:'<div>This should be visible:{{ ctrl.one }}</div><div>This should not:{{ one }}</div>',
      controller: 'Ctrl',
      controllerAs: 'ctrl',
    });
}]);

app.controller('Ctrl', function($scope) {
  $scope.one = 'actual';
});

不知道这是bug还是我做错了什么，这是一个plnkr演示问题

推荐答案

实际问题：

您似乎是使用 controllerAs （分配CTRL的值）的，可是后来不让你的code的其余部分使用它。 （您使用 $范围）

You seem to be using controllerAs (assigning a value of 'ctrl') originally, but then later not making use of it in the rest of your code. (you used $scope)

解决方案：

工作演示，按您的样品

当我一直在使用，你需要使用以下模式（S）之一，可以访问控制器的实例 controllerAs 语法：

When I've been using the controllerAs syntax you need to use one of the following pattern(s) to get access to the instance of the controller:

相对于财产追加到 $范围，你必须绑定到控制器范围。请注意，这是 $范围不同。由于缺乏更好的术语，你需要绑定控制器本身（认为它作为它的上下文）。当我们正在处理的显示层或视图模式，我倾向于使用 VAR VM =这一点; 作为一种惯例，但这种个人的preference。

As opposed to appending the property to $scope, you have to bind to the controller scope. Note this is different to $scope. For lack of a better term, you need to bind controller itself (think of it as its context). As we're dealing with the display layer or view model, I tend to use var vm = this; as a convention, but this personal preference.

[A]：preferred解决方案

app.controller('Ctrl', function() {        
    this.one = 'actual';  
});

//or using 'vm' convention

app.controller('Ctrl', function() {
    var vm = this;
    vm.one = 'actual';  
});

[B]

app.controller('Ctrl', function() {
    var vm = {};
    vm.one = 'actual';
    return vm;
});

说明：

当我第一次使用开始角， [B] 是我用过，从淘汰赛背景纯粹来的做法。我被用来结合到容器对象然后结合到物体向视图。话虽这么说，我preFER要使用 [A] ，或者直接附加到 $范围，完全放弃的别名。原因：

When I first started using Angular, [B] was the approach that I used, purely coming from a Knockout background. I was used to binding to a "container" object then binding the object to the view. That being said, I prefer to use [A], or append directly to $scope and forgo the alias completely. Reasons:

• 我觉得它更清洁的ITO可读性


• 作为@ Swordfish0321指出， [A] 是更好的性能（它应该是给你一个问题）


• 我结合自定义指令的问题，我写的，其中依赖于某些父范围的属性（具体到我的code-基地）

• I feel its cleaner ITO readability
• As @Swordfish0321 stated, [A] is more performant (should it be a concern to you)
• I had binding issues with custom directives I wrote that where dependent on certain parent scope properties (specific to my code-base)

只是作为一种视觉：

演示

 app.controller('Ctrl', function($scope) {
      var vm = this;
      vm.one = 'actual'; 
      console.log($scope) 
 });

传入 $范围对象，并进一步检查它，你会看到一个包含新的 CTRL 子对象所有的公共属性和功能被绑定到 VM 控制器code内。这是因为您分配 VAR VM =此。含义 VM 在code对象引用控制器本身的范围，最终被绑定到视图。 controllerAs 基本组的所有特性和功能，包含内部的控制器到您所提供的别名命名的新对象。

Passing in the $scope object and further inspecting it, you'll see a new ctrl child object containing all your public properties and functions that was bound to vm inside the controller code. This is because you've assigned var vm = this. Meaning the vm object in the code is referencing the controller's own scope, which ultimately gets bound to the view. controllerAs basically groups all properties and functions contained internal to the controller to a new object named after the alias that you've provided.

这篇关于角的＆QUOT; controllerAs＆QUOT;在routeProvider不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！