Question

我正在构建一个卷影复制指令，以便我可以轻松地放弃对对象所做的更改，并且只在按下按钮时才提交它们。这工作正常，但我发现在某些情况下，我想在提交数据时调用控制器内的函数。如何通过将函数作为属性传递来从指令访问控制器中的函数？

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <div my-directive="name" commit-function="saveData()">
    <input type="text" ng-model="name" />
    <button ng-click="commit()">
      Save
    </button>
  </div>
  <span>{{name}}</span>
  <br />
  <span>{{copiedName}}</span>
</div>

指令：

myApp.directive('myDirective', function() {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.myDirective] = angular.copy(scope.$parent[att.myDirective]);
      scope.commit = function() {
        scope.$parent[att.myDirective] = angular.copy(scope[att.myDirective]);
      }
    }
  }
});

控制器：

myApp.controller('myCtrl', function($scope) {
  $scope.name = 'Frank';
  $scope.copiedName = 'Freddie';

  $scope.saveData = function() {
    $scope.copiedName = $scope.name;
  }
});

我将commit-function属性设置为saveData（），现在我想从该属性中获取函数。

我知道我可以使用隔离范围并设置commitFunction：'＆amp;'但据我了解，我无法访问该指令的提交函数。

这是codepen显示我正在追求的东西。我希望当这个工作时，saveData被触发并且name和copiedName的显示匹配。

Answer 1

为了能够调用属性commit-function中指定的方法，您可以使用$apply，因为$rootScope已在进行中，您可以添加$timeout

myApp.directive('myDirective',['$timeout', function($timeout) {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.myDirective] = angular.copy(scope.$parent[att.myDirective]);
      scope.commit = function() {
        scope.$parent[att.myDirective] = angular.copy(scope[att.myDirective]);
        $timeout(function(){
           scope.$apply(att.commitFunction);
        },0);}
    }
  }
}]);

具有新范围的angular指令内的回调方法

1 个答案: