如何正确地绑定指令和控制器之间angularJS范围 [英] How to properly bind scope between directive and controller with angularJS

问题描述

我想生成anugularJS N级别的层次无序列表，并且已经能够成功地做到这一点。但现在，我有指令和控制器之间范围的问题。在指令中的模板，我需要父母的财产范围从通过调用的函数内更改NG点击。

I'm trying to generate an n-level hierarchical unordered list with anugularJS, and have been able to successfully do so. But now, I'm having scope issues between the directive and controller. I need to change a scope property of the parent from within a function called via ng-click in the directive template.

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

See http://jsfiddle.net/ahonaker/ADukg/2046/ - here's the 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-点击调用设置父scope属性（itemselected）的功能，但只能改变局部发生。预期的行为，当我点击一个项目，就是其中xxx为被点击的项目：XXX选择，选无应更改为。

Note the list is generated from the model. And ng-click calls the function to set the parent scope property (itemselected), but the change only occurs locally. Expected behavior, when I click on an item, is that "Selected: None" should change to "Selected: xxx" where xxx is the item that was clicked.

难道我没有约束力父范围和适当的指令之间的财产？我如何通过属性更改父范围？

Am I not binding the property between the parent scope and the directive appropriately? How do I pass the property change to the parent scope?

希望这是显而易见的。

感谢您事先的任何帮助。

Thanks in advance for any help.

推荐答案

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

Please have a look at this working fiddle, http://jsfiddle.net/eeuSv/

我所做的就是，要求导航树节点指令里面的父控制器，并呼吁在控制器中定义的成员函数。
成员函数是的setSelected 。请注意，它的 this.setSelected ，而不是 $ scope.setSelected 。
然后定义一个导航树节点范围的方法 itemSelect 。当你点击锚标记，它会调用 itemSelect 的导航树节点的方式范围。这inturn将调用控制器成员方法的setSelected 通过选定的ID。

What i did was to require the parent controller inside the navtree-node directive, and call a member function defined in that controller. The member function is setSelected. Please note that its this.setSelected and not $scope.setSelected. Then define a navtree-node scope method itemSelect. While you click on the anchor tags, it will call the itemSelect method on the navtree-node scope. This inturn will call the controllers member method setSelected passing the selected id.

scope.itemSelect =功能（ID）{
    myGreatParentControler.setSelected（id）的
}

这篇关于如何正确地绑定指令和控制器之间angularJS范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！