javascript - 如何从 Controller 到指令模板进行通信

Question

我正在考虑将数据从我的 Controller 传递到指令模板。我怎样才能做到这一点？

这是我的 Controller :

$scope.$on('itemSelectedEvent', function (event, args) {
    $scope.displayOrgs.push(data.orgName);
})

指令:

directive('search', function ($timeout) {
    return {
        restrict: 'AEC',
        scope: {    
            selecteditemslist: "=",
            searchid: "@",
            selecteditemsdisplay: "=",
            searchobj: '@',
            displayOrgs: '=displayOrgs'    
        },
        link: function (scope, elem, attrs, index, searchobj,searchid) {
            scope.$emit('itemSelectedEvent', {
                selectedId:scope.selectedId,
                sortOrder:index,
                searchId : searchid
            }
        );
    }
});

此 displayOrgs 应传递给指令。我怎么变得未定义？

<li class="tag" ng-repeat="list in displayOrgs  track by $index"  ng-class="{selected: $index==selectedIndex}" >
    <span class="tag-label">{{list}}</span>
    <span class="tag-cross pointer" ng-click="Delete($index,selecteditemslist[$index],list,searchobj)">x</span>
</li>

请帮助我。提前致谢。

Answer 1

无需生成事件 scope.$emit 来通知 Controller 变量已更改。虽然您可以通过隔离范围内的两个绑定(bind)来控制变量:{ .. }

displayOrgs: '=displayOrgs' has = means two way binding with variable associated with directive element attribute div.

当您在指令中使用 displayOrgs: '=displayOrgs' (在隔离范围内)时，隔离范围内提到的任何变量的更改都会在将这些更改应用于与 display-orgs 属性关联的作用域变量。

link: function (scope, elem, attrs) {
   scope.displayOrgs.push(data.orgName); // this will update binding with parent scope.
});