Question

我正在阅读Brad Dayley撰写的学习Angular Js一书。该书在其示例中使用了$scope。我正在推动自己使用controllerAs。在第七章中，本书侧重于创建自定义指令。

我创建了一个类似于提供的示例的简单的。在里面我设置transclude为true。我正在使用链接功能将页脚附加到父div。在页脚标记内部，本书的作者调用scope.$parent.title在示例中，title值来自父控制器。

  .directive('myBox', function() {
        return {
            transclude: true,
            restrict: 'E',
            scope: {title: '@', bwidth: '@bwidth'},
            template: "<div><span class='titleBar'>{{title}}"+ "</span> <div ng-transclude></div></div>",
            link:function(scope, elem, attr, controller, transclude) {
                console.log('scope', scope.$parent)
                console.log('controller', controller);
                elem.append('<span class="footer">'+ scope.$parent.title + '</span>');
                elem.css('border', '2px ridge black');
                elem.css('display', 'block');
                elem.css('width', scope.bwidth);
            }
        }
    })

在本书的内部，控制器使用$scope，我想使用controller as并使用vm来表示这一点。这是我的控制器功能。 vm.title应该是页脚上的值。

检查值时，我从控制台收到undefined。

function FunCtrl() {
    var vm = this;

    vm.title = "myApplication";
}

以下是我正在尝试的内容

http://plnkr.co/edit/uUeKrTwLOfkcGpkTU1Uz?p=preview

Answer 1

当您使用 ng-controller 语法时，它只是调用控制器的成员，如＆＃34; start（）＆＃34;在范围内。

   <input ng-click="start()" type="button" value="Button"/>

但是当您使用 controllerAs 语法时，会创建一个控制器实例并将其分配给您提供的参考变量 - ＆＃34; fun＆＃34;。因此，只有使用引用才能访问控制器中定义的任何内容。 - ＆＃34; fun.start（）＆＃34;在范围内。

   <input ng-click="fun.start()" type="button" value="Button"/>

因此，如果您使用了 controllerAs 语法，则在访问父作用域成员时必须执行相同操作

scope.$parent.fun.title

Demo

注意 您在控制台中输出的控制器是属于您尚未定义的指令的控制器。

使用Controller

1 个答案: