时间戳

首页 > 解决方案 > 如何在angularJS中从控制器调用指令函数？

angularjs - 如何在angularJS中从控制器调用指令函数？

问题描述

我的指令中有一个更新模型函数，我想从控制器调用它。如何从控制器访问指令功能？我可以调用模型更改，但为此我必须执行单击事件。

下面是我的代码：

<div ng-if="((individualDropdown && YesRadio) || FolderDropdown)">
  <searchable-multiselect display-attr="infoMarketCodeWithName" 
    selected-items="formData.market" 
    all-items="allMarkets" 
    add-item="addMarketToList(item,allMarkets)" 
    remove-item="removeMarketFromList(item,allMarkets)" 
    ng-disable="NoRadio || NotSureRadio"
    ng-model="formData.market" name="marketDropdown">
  </searchable-multiselect>
</div>

指令代码和要调用的函数是updateSelectedItems

app.directive("searchableMultiselect", ['$timeout', '$filter', function($timeout, $filter) {
        return {
          templateUrl: "Templates/SearchableMultiselect.html",
          require: 'ngModel',
          restrict: "AE",
          scope: {
            displayAttr: "@", //one way binding & only expression
            selectedItems: "=", //two way binding & expects model name
            allItems: "=",
            readOnly: "=",
            addItem: "&",
            removeItem: "&", //method binding               
          },
          link: function(scope, element, attrs) {
            element.bind('click', function(event) {
              event.stopPropagation();
            });
            scope.updateSelectedItems = function(obj) {
              console.log(scope.allMarkets);
              //code goes here
            }
          }
        ])

标签： angularjsangularjs-directiveangularjs-controller

解决方案

从 AngularJS 良好实践的角度来看，您应该通过不将如此强的依赖关系放在控制器上以了解指令等中的函数名称来强制执行关注点分离原则。

一种替代方法是使用事件驱动的方法，其中指令提交一个事件，该事件由受控者捕获并采取行动，通过更新模型来关闭循环。

app.directive("searchableMultiselect", ['$timeout', '$filter', function($timeout, $filter) {
    return {
        templateUrl: "Templates/SearchableMultiselect.html",
        require: 'ngModel',
        restrict: "AE",
        scope: {
            displayAttr: "@", //one way binding & only expression
            selectedItems: "=", //two way binding & expects model name
            allItems: "=",
            readOnly: "=",
            addItem: "&",
            removeItem: "&", //method binding               
        },
        link: function(scope, element, attrs) {
            element.bind('click', function(event) {
                event.stopPropagation();
            });

            scope.updateSelectedItems = function(obj) {
                console.log(scope.allMarkets);
                scope.$emit("updateSelectedItems", scope.allMarkets);
            }
        }
    }   
}])

在控制器中：

app.controller("ctrl", ['$scope', function ($scope) {
    $scope.$on("updateSelectedItems", function (event, allMarkets) {
        // Do stuff with data
        // Update data model bound to directive if necessary
    });
}])

希望这是有道理的:)

推荐阅读