Question

我试图理解在Angular中使用命名控制器（控制器作为语法）。
在我的应用程序中，我有相同的控制器与一些不同的div相关联。在html页面中，控制器始终以（myCtrl as C）命名。在控制器内部，我使用了this。
控制器有一些变量和一些在html页面中绑定/调用的方法。

我有一些奇怪的行为，我试图在这个例子中复制：

var app=angular.module("myApp", []);

app.controller("ctrl", function(){
    vm=this
    vm.name="Pippo";
    vm.msg=function(){alert(vm.name)}
})

app.controller("ctrl2", function(){
    this.name="Pippo";
    this.msg=function(){alert(this.name)}
})

app.controller("ctrl3", function($scope){
    $scope.name="Pippo";
    $scope.msg=function(){alert($scope.name)}
});

http://jsfiddle.net/k66Za/111/

我的情况是第一个，使用ctrl1的情况。正如你所看到的，我期望点击第一个按钮不是我得到的：而不是返回ctrl1名称，它返回ctrl2名称。

当然这是我的缺点，但我没有看到ctrl1和ctrl2之间的区别。有人可以向我解释一下我的例子中发生了什么，我是否应该使用$scope，this，最重要的是，为什么使用vm（vm=this}与使用{不同} {1}}？

Answer 1

从技术上讲，ctrl和ctrl2之间没有区别。你应该做你在ctrl中所做的事情而不是你在ctrl2中所做的是这样的原因：

最好将控制器this绑定到变量，以便稍后引用它。 this根据您使用它的上下文更改含义。如果您在函数内引用this，则它引用该函数。如果要从函数内部将某些内容绑定到控制器，则无法使用this执行此操作。

当我们将$ scope注入控制器时，我们使用$ scope作为＆＃39; glue＆＃39;控制器和视图之间。两者之间的一种调解者。如果我们使用controller as语法，我们直接处理控制器实例，因此我们必须引用myCtrl.myVar而不是myVar（当它附加到$ scope时）。

你的小提琴中有这个代码：

<div ng-controller="ctrl2 as c"  ng-init="c.name=3">
        Name: <input type="text" ng-model="c.name" />
        <input type="button" ng-click="c.msg()" value="I should show {{c.name}}" ></input>
        </div>

        <div ng-controller="ctrl2 as c"  ng-init="c.name=4">
        Name: <input type="text" ng-model="c.name" />
        <input type="button" ng-click="c.msg()" value="I should show {{c.name}}" ></input>
        </div>

看起来这段代码表现得很奇怪，但实际上并非如此。无论您点击哪个按钮，它们都会返回4。这是因为您要将同一个控制器实例化两次。当角度消化页面时，它会到达第一个实例化，将3分配给c.name，然后它会点击第二个实例，将4分配给c.name，所以当你尝试调用对c.name的引用它会给你第二个值。

Answer 2

好的，也许我找到了解决问题的方法。举个例子：http://jsfiddle.net/k66Za/113/ 它不起作用：单击第一个按钮，我得到值2（insted为1）

现在我更改vm=this

中的行var vm=this

现在一切都按原样运作。为什么？有什么区别？

我无法理解Angularjs中命名控制器的范围以及关键字this的使用

2 个答案: