如何将对象从具有隔离范围的嵌套指令传递到角度的父控制器范围答案

【问题标题】：How to pass an object from a nested directive with isolated scope to parent controller scope in angular如何将对象从具有隔离范围的嵌套指令传递到角度的父控制器范围
【发布时间】：2016-01-19 17:50:12
【问题描述】：

我有一个指令树视图，其中包含渲染的每个项目的嵌套指令（即分支）。

在这两个指令的范围内，我已经声明了两个应该与父控制器对话的参数。

filter: '&' //将嵌套指令（分支）中的方法过滤器绑定到树指令属性中的方法 doSomething()，该属性绑定到绑定到控制器的 html 指令。

iobj: '=' 是双向绑定参数，应该将作用域对象传递给控制器。（但目前不是）

指令：

app.directive('tree', function () {
    return {
        restrict: 'E', 
        replace: true,
        scope: {
            t: '=src',
            filter: '&',
            iobj: '='
        },
        controller: 'treeController',
        template: '<ul><branch ng-repeat="c in t.children" iobj="object" src="c" filter="doSomething()"></branch></ul>'
    };
});

app.directive('branch', function($compile) {

    return {
        restrict: 'E', 
        replace: true, 
        scope: {
            b: '=src',
            filter: '&',
            iobj: '='
        },

        template: '<li><input type="checkbox" ng-click="innerCall()"  ng-hide="visible" /><a>{{ b.name }}</a></li>',
        link: function (scope, element, attrs) {
           var has_children = angular.isArray(scope.b.children);
            scope.visible = has_children;
            if (has_children) {
                element.append('<tree src="b"></tree>');
                $compile(element.contents())(scope);
            }
            element.on('click', function(event) {
                event.stopPropagation();
                if (has_children) {
                    element.toggleClass('collapsed');
                }
            });
            scope.innerCall = function () {
                scope.iobj = scope.b;

                console.log(scope.iobj);
                scope.filter();
            }
        }
    };
});

HTML：

<div ng-controller="treeController">
    <tree src="myList" iobj="object" filter="doSomething()"></tree>

    <a ng-click="clicked()"> link</a>
</div>

控制器：

app.controller("treeController", ['$scope', function($scope) {
    var vm = this;

    $scope.object = {};
    $scope.doSomething = function () {
        var item = $scope.object;
        //alert('call from directive');
        console.log(item);
   }

   $scope.clicked = function () {
       alert('clicked');
   }
...

目前我可以从指令调用函数$scope.doSomething 到控制器。所以我知道我可以从指令中访问控制器范围。我无法弄清楚的是如何将对象作为参数从指令传递回控制器。当我运行这段代码时，$scope.object 始终是一个空对象。

如果您有任何关于如何解决此问题的帮助或建议，我们将不胜感激。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

& 指令绑定支持参数传递。给出你的例子

scope.filter({message: 'Hello', anotherMessage: 'Good'})

message 和 anotherMessage 成为绑定到指令的表达式中的局部变量：

<tree src="myList" iobj="object" filter="doSomething(anotherMessage, message)"></tree>

这是一个示例plunker，其中回调参数在模板内设置。

documentation 明确指出：

通常希望通过一个表达式到父范围，这可以通过传递一个映射来完成将局部变量名称和值放入表达式包装器 fn。为了例如，如果表达式是increment(amount)，那么我们可以指定通过将localFn 称为localFn({amount: 22}) 来调用金额值。

【讨论】：