18

我正在尝试使用 anugularJS 生成一个 n 级分层无序列表，并且已经能够成功地做到这一点。但是现在，我在指令和控制器之间遇到了范围问题。我需要在指令模板中通过 ng-click 调用的函数中更改父级的范围属性。

请参阅http://jsfiddle.net/ahonaker/ADukg/2046/ - 这是 JS

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.itemselected = "None";
    $scope.organizations = {
        "_id": "SEC Power Generation",
        "Entity": "OPUNITS",
        "EntityIDAttribute": "OPUNIT_SEQ_ID",
        "EntityID": 2,
        "descendants": ["Eastern Conf Business Unit", "Western Conf Business Unit", "Atlanta", "Sewanee"],
        children: [{
            "_id": "Eastern Conf Business Unit",
            "Entity": "",
            "EntityIDAttribute": "",
            "EntityID": null,
            "parent": "SEC Power Generation",
            "descendants": ["Lexington", "Columbia", "Knoxville", "Nashville"],
            children: [{
                "_id": "Lexington",
                "Entity": "OPUNITS",
                "EntityIDAttribute": "OPUNIT_SEQ_ID",
                "EntityID": 10,
                "parent": "Eastern Conf Business Unit"
            }, {
                "_id": "Columbia",
                "Entity": "OPUNITS",
                "EntityIDAttribute": "OPUNIT_SEQ_ID",
                "EntityID": 12,
                "parent": "Eastern Conf Business Unit"
            }, {
                "_id": "Knoxville",
                "Entity": "OPUNITS",
                "EntityIDAttribute": "OPUNIT_SEQ_ID",
                "EntityID": 14,
                "parent": "Eastern Conf Business Unit"
            }, {
                "_id": "Nashville",
                "Entity": "OPUNITS",
                "EntityIDAttribute": "OPUNIT_SEQ_ID",
                "EntityID": 4,
                "parent": "Eastern Conf Business Unit"
            }]
        }]
    };

    $scope.itemSelect = function (ID) {
        $scope.itemselected = ID;
    }
}

app.directive('navtree', function () {
    return {
        template: '<ul><navtree-node ng-repeat="item in items" item="item" itemselected="itemselected"></navtree-node></ul>',
        restrict: 'E',
        replace: true,
        scope: {
            items: '='
        }
    };
});

app.directive('navtreeNode', function ($compile) {
    return {
        restrict: 'E',
        template: '<li><a ng-click="itemSelect(item._id)">{{item._id}} - {{itemselected}}</a></li>',
        scope: {
            item: "=",
            itemselected: '='
        },
        controller: 'MyCtrl',
        link: function (scope, elm, attrs) {
            if ((angular.isDefined(scope.item.children)) && (scope.item.children.length > 0)) {
                var children = $compile('<navtree items="item.children"></navtree>')(scope);
                elm.append(children);
            }
        }
    };
});

这是HTML

<div ng-controller="MyCtrl">
    Selected: {{itemselected}}

    <navtree items="organizations.children"></navtree>
</div>

请注意，该列表是从模型生成的。而ng-click调用该函数设置父作用域属性（itemselected），但改变只发生在本地。当我单击一个项目时，预期的行为是“已选择：无”应更改为“已选择：xxx”，其中 xxx 是单击的项目。

我是否没有适当地绑定父范围和指令之间的属性？如何将属性更改传递给父范围？

希望这很清楚。

提前感谢您的帮助。

4

3 回答 3

18

请看看这个工作小提琴，http://jsfiddle.net/eeuSv/

我所做的是要求navtree-node指令中的父控制器，并调用该控制器中定义的成员函数。成员函数是setSelected。请注意，它this.setSelected不是$scope.setSelected. 然后定义一个navtree-node范围方法itemSelect。当您单击锚标记时，它将调用范围itemSelect上的方法navtree-node。这反过来将调用setSelected传递所选 id 的控制器成员方法。

scope.itemSelect = function(id){ myGreatParentControler.setSelected(id) }

于 2013-03-13T19:00:41.033 回答
11

Maxdec 是对的，这与范围界定有关。不幸的是，这种情况非常复杂，以至于 AngularJS 文档可能会误导初学者（比如我自己）。

警告：当我试图解释这一点时，请做好准备，因为我有点啰嗦。如果您只想查看代码，请转到此JSFiddle。我还发现egghead.io视频对于了解 AngularJS 非常宝贵。

这是我对问题的理解：您有一个指令层次结构（navtree，navitem），并且您希望将信息从 navitem“向上”传递到根控制器。AngularJS 与一般编写良好的 Javascript 一样，被设置为对变量的范围非常严格，这样您就不会意外地弄乱页面上也在运行的其他脚本。

Angular 中有一个特殊的语法 ( &)，它可以让你创建一个隔离作用域并在父作用域上调用一个函数：

// in your directive
scope: {
   parentFunc: '&'
}

到现在为止还挺好。当您有多个级别的指令时，事情会变得很棘手，因为您本质上想要执行以下操作：

  1. 在根控制器中有一个接受变量并更新模型的函数
  2. 中级指令
  3. 可以与根控制器通信的子级指令

问题是，子级指令看不到根控制器。我的理解是，您必须在指令结构中设置一个“链”，其作用如下：

首先：在你的根控制器中有一个函数，它返回一个函数（它引用了根视图控制器的范围）：

$scope.selectFunctionRoot = function () {
    return function (ID) {
        $scope.itemselected = ID;
    }
}

第二：设置中级指令，使其拥有自己的选择函数（它将传递给子函数），该函数返回如下内容。注意我们必须如何保存中级指令的范围，因为当这段代码实际执行时，它将在子级指令的上下文中：

// in the link function of the mid-level directive. the 'navtreelist'
scope.selectFunctionMid = function () {
    // if we don't capture our mid-level scope, then when we call the function in the navtreeNode it won't be able to find the mid-level-scope's functions            
    _scope = scope;
    return function (item_id) {
        console.log('mid');
        console.log(item_id);

        // this will be the "root" select function
        parentSelectFunction = _scope.selectFunction();
        parentSelectFunction(item_id);
    };
};

第三：在子级指令 ( navtreeNode) 中将一个函数绑定到ng-click一个调用本地函数的函数，该函数又将“调用链”一直到根控制器：

// in 'navtreeNode' link function
scope.childSelect = function (item_id) {
    console.log('child');
    console.log(item_id);

    // this will be the "mid" select function  
    parentSelectFunction = scope.selectFunction();
    parentSelectFunction(item_id);
};

这是您的 JSFiddle的更新分支，在代码中有注释。

于 2013-03-13T18:45:29.413 回答
3

这可能是因为每个指令都创建了自己的范围（实际上是您告诉他们这样做的）。您可以在此处
阅读有关指令的更多信息，尤其是“编写指令（长版）”一章。

范围- 如果设置为：

true - 然后将为此指令创建一个新范围。如果同一元素上的多个指令请求一个新范围，则只会创建一个新范围。新的范围规则不适用于模板的根，因为模板的根总是获得一个新的范围。

{}（对象哈希） - 然后创建一个新的“隔离”范围。“隔离”作用域与普通作用域的不同之处在于它在原型上并不从父作用域继承。这在创建可重用组件时很有用，这些组件不应意外读取或修改父范围内的数据。

因此，您所做的更改不会反映在 MyCtrl 范围中，因为每个指令都有自己的“隔离”范围。

这就是为什么单击只会更改局部$scope.itemselected变量而不是“全部”的原因。

于 2013-03-13T17:24:47.513 回答