0

从指令中定义的控制器访问范围变量的正确方法是什么？

例如，我想让 click 事件调用父指令控制器上的函数。在父指令中，我希望控制器能够访问“常量”、FOO_VIEW、BAR_VIEW、BAM_VIEW

将这些常量放在顶级控制器中是否更有意义，在本例中为 SearchCtrl（未显示）？

指令：

.directive('usersAndApps', function() {
        return {
            restrict:'EA',
            scope: true,
            controller: function() {
                this.toggleView = function(viewName){
                    console.log('show view ' + viewName);
                }
            },
            link:function(scope, elem, attrs) {
                scope.FOO_VIEW = 'fooView';
                scope.BAR_VIEW = 'barView';
                scope.BAM_VIEW = 'bamView';
            }
        }
    }).directive('usersAndAppsNav', function() {
        return {
            restrict: 'AE',
            require:'^?usersAndApps',
            replace:true,
            scope:true,
            link:function(scope,elem,attrs,usersAndAppsCtrl){
                scope.toggleView = function(viewName){
                    usersAndAppsCtrl.toggleView(viewName);
                }
            },
            templateUrl:'partials/usersAndApps/throwmeaway'
        }
    });

模板：

<div>
    <button class="btn btn-large btn-primary" ng-click="toggleView(FOO_VIEW)">Foo View</button>
    <button class="btn btn-large btn-primary" ng-click="toggleView(BAR_VIEW)">Bar View</button>
    <button class="btn btn-large btn-primary" ng-click="toggleView(BAM_VIEW)">Bam View</button>
</div>

指令和嵌套（子）指令：

<div ng-controller="SearchCtrl">
    <users-and-apps>
        <users-and-apps-nav></users-and-apps-nav>
    </users-and-apps>
</div>
4

2 回答 2

1

您所拥有的很好，但是由于您没有在 中使用隔离或转入作用域usersAndAppsNav，因此您不需要在其上定义控制器 API —如果您在作用域上定义它，usersAndApps您可以简单地利用原型作用域继承来访问方法toggleViewParent相关usersAndApps：

.directive('usersAndApps', function() {
return {
    restrict:'EA',
    scope: true,
    link:function(scope, elem, attrs) {
        scope.FOO_VIEW = 'fooView';
        ...
        scope.toggleViewParent = function(viewName){
            console.log('show view ' + viewName);
        }
    }
}
}).directive('usersAndAppsNav', function() {
return {
    restrict: 'AE',
    replace:true,
    scope:true,
    link:function(scope,elem,attrs) {
        scope.toggleView = function(viewName){
            scope.toggleViewParent(viewName);
        }
    },
   templateUrl: ...
}
});

Fiddle.

在此处输入图像描述

请注意，当您ng-click="toggleView(FOO_VIEW)"在模板中编写时，您已经在使用原型继承 - FOO_VIEW 评估的唯一原因fooView是因为原型继承 -FOO_VIEW是在与usersAndApps子范围（范围 005）相关的范围（范围 004）上定义的通过继承链/查找（即，按照虚线）。

于 2013-05-30T21:59:05.703 回答
-3

看看这个涵盖这个主题的快速视频教程@http: //www.egghead.io/video/LJmZaxuxlRc

他还有许多其他非常棒的 AngularJS 教程视频链接到该网站。

于 2013-05-30T18:37:48.300 回答