angularjs - 使指令函数在父范围内可访问而无需事件

Question

我有一个带有独立作用域的指令，我想调用它的函数来更新来自父 Controller 的数据而不使用事件。

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
  }
    
}

<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>

Answer 1

您可以应用此解决方案。

通过这种方式，您以两种方式绑定(bind)传递变量:

• 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>