使用 Controller 作为父控制器访问数据

Question

我正在阅读 Brad Dayley 的《学习 Angular Js》一书。该书在其示例中使用 $scope。我强迫自己使用 controllerAs。在第七章中，本书重点介绍了创建自定义指令。

我创建了一个类似于所提供示例的简单示例。在里面我将 transclude 设置为 true。我正在使用 link 函数将页脚附加到父 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";
}

这是我正在尝试的一个 plunker

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

Answer 1

当你使用 ng-controller 语法时，它只是在范围内调用控制器的成员，如 "start()"。

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

但是当您使用 controllerAs 语法时，会创建一个控制器实例并将其分配给您提供的引用变量 - "fun"。因此，您在控制器中定义的任何内容都只能通过引用访问。 - "fun.start()" 在范围内。

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

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

scope.$parent.fun.title

Demo

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

使用 Controller 作为父控制器访问数据

Accessing data out of parent controller with Controller as

angularjs

angular-directive