Question

我有一个带有隔离的范围的指令，并希望调用其函数来更新来自父控制器的数据，而不使用事件

＆＃13;

var myApp = angular.module('MyApp',[]);

myApp.directive('myDirective', function() {

  return {
    scope: {},
    link: function(scope) {
      scope.update = function() {
        alert('Directive updated!');
      }
    }
  }
  
});

function MyCtrl($scope) {
  
  $scope.updateDirective = function() {
    // make me call update() function in directive
  }
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl">
  <button ng-click="updateDirective()">Update!</button>
  
  <span my-directive></span>
</div>

＆＃13;

Answer 1

您可以应用此解决方案。

通过这种方式，您将以双向绑定方式传递变量：

my-directive="myFunction"在html
和myFunction: '=myDirective'

然后在指令中分配函数：

    scope.myFunction = function () {
        alert('Directive updated!');
    }

通过这种方式，您可以使用指令中定义的函数。

var myApp = angular.module('MyApp', []);

myApp.directive('myDirective', function () {

    return {
        scope: {
            myFunction: '=myDirective'
        },
        link: function (scope) {

            scope.myFunction = function () {
                alert('Directive updated!');
            }

        }
    }

});

function MyCtrl($scope) {
    $scope.myFunction = {};
    $scope.updateDirective = function () {
        console.log( $scope.myFunction );
        $scope.myFunction();
        // make me call update() function in directive
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <button ng-click="updateDirective()">Update!</button> <span my-directive="myFunction"></span>

</div>

Answer 2

您可以通过您的Isolated指令引入require d的新指令来解决此问题。方便的是，您可以将控制器分配给这个新指令。

一旦需要，您就可以注册＆＃39;您对父母的孤立指示＆＃39;指令作为您的函数的目标。在下面的代码片段中，我只提供了添加1指令的方法，但您可以轻松地将其扩展为子指令数组。这种设置的一个很好的例子是制表符，其中每个tab是一个公共tabs指令的子指令。

＆＃13;

angular.module("MyApp", []);

angular.module('MyApp').directive("myParentDirective", function(){
return {
    controller: function ($scope) {
        var childUpdate;
        this.registerChild = function(_childUpdate_){
            childUpdate = _childUpdate_;
        };      
        
        $scope.updateDirective = function() {
            childUpdate();
        };

    }
};
});
angular.module('MyApp').directive('myDirective', function() {
return {
    require: '^myParentDirective',
    scope: {},
    link: function(scope, element, attrs, myParentController) {
        myParentController.registerChild(update);
        
        function update() {
            alert('Directive updated!');
        }
    }
};
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
    <div my-parent-directive>
        <button ng-click="updateDirective()">Update!</button>
        <span my-directive></span>
    </div>
</div>

＆＃13;

在没有事件的父作用域中可以访问指令函数

2 个答案: