AngularJS: "Controller as"语法和指令

Question

在重构我的 AngularJS 代码以使用“controller as”语法后，我无法让我的指令之一工作。

旧的工作代码( Fiddle ):

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected"/>
        selected = {{selected}}
    </div>        
</div>

JS:

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

这是我的非工作(自动完成建议不会出现)版本，带有“ Controller 为”( Fiddle ):

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl as ctrl'>
        <input auto-complete ui-items="ctrl.names" ng-model="ctrl.selected"/>
        selected = {{ctrl.selected}}
    </div>
</div>

JS:

function DefaultCtrl() {
    this.names = ["john", "bill", "charlie"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

Answer 1

问题似乎出在这一行:

source: scope[iAttrs.uiItems],

变成:

source: scope['ctrl.names'],

我明白为什么如果与对象表示法一起使用会出现问题。

解决方法是像这样避免它:

source: scope.ctrl[iAttrs.uiItems], // "controller as" lets us have scope namespaces

并更改属性名称:

ui-items="names"

在这里查看全部内容: http://jsfiddle.net/cnve0jbh/2/