Question

如何使用表达式绑定将一个函数向下传递给具有隔离范围的两个指令？

我在父子关系中有两个指令：

app.directive('parentDir', function(){
    return {
        scope:{
            parentData:'=',
            changeRouteParent:'&'
        },
        templateUrl:'mydir/parentTemplate.html'
    };
});

app.directive('childDir', function(){
    return {
        scope:{
            dirData:'=',
            changeRoute:'&'
        },
        templateUrl: 'mydir/childTemplate.html'
    };
});

在父模板中：

<div class="parentDirClass">
    <a ng-click="changeRouteParent({newFoo:parentData.url})>fooLink</a>
    <div child-dir ng-repeat="child in parentData.childData" dir-data="child" change-route="???"></div>
</div>

在儿童模板中：

<div class="childDirClass">
  <a ng-click="changeRoute=({{newFoo:dirData.url}})">foolink</a>
</div>

尝试一起使用指令：

app.controller('exampleController', function($scope, $state){
    $scope.changeRoute = function(newFoo) {
        $state.go(newFoo);
    };
    $scope.theParentData = pData;
});

//parent data
pdata = {url:'/fooUrl',
         childData:[{url:'/whatever1'},{url:'/whatever2'}, {url:'/whatever3'}]};

HTML：

<div ng-controller="exampleController">
 <div parent-dir parent-data="pData" change-route-parent="changeRoute(newFoo???)"></div>
</div>

使用一级表达式绑定，解决方案似乎很容易，因为您可以轻松识别传递的变量（在child指令中为changeRoute=({{newFoo:dirData.url}})），但随后向上移动一级我没有要传递的变量。如何继续将dirData.url链上传到示例控制器中以调用changeRoute？

Answer 1

经过一些修补后，我发现链接可以实现如下 -

在最多子指令的模板中使用绑定表达式时： childBoundExpression({variableFromChild:variableinIsolatedScope})

然后，从最多子指令的父级开始：

<div childDirective child-bound-expression="parentBoundExpression({variableToParent:variableFromChild}) ></div>

对于第n个父级使用上面的表达式并重复，直到到达top指令/ html。最终variableToParent的名称必须是将传递给最父母$scope上的函数的变量

最重要的一点是如果您将同一个变量从子级传递到父级variableToParent且variableFromChild必须是同一个名称。

在AngularJS中跨越隔离范围链接表达式绑定

1 个答案: