Question

在查找有关Angular指令和将行为传递给指令的信息时，我最终被指向隔离范围上方法绑定的方向，即

scope: {
  something: '&'
}

此功能的documentation有点令人困惑，我不认为它最终会按照我的意愿行事。

我最终提出了这个片段（为了简洁而简化），它通过在HomeCtrl中传递范围函数来工作，并且该指令完成它的工作并调用该函数。（只是重要的是，真正的代码会传回指令的承诺）。

＆＃13;

angular.module('app', []);

angular.module('app')
  .directive('passingFunction',
    function() {
      var changeFn,
        bump = function() {
          console.log('bump() called');
          internalValue++;
          (changeFn || Function.prototype)(internalValue);
        },
        internalValue = 42;

      return {
        template: '<button ng-click="bump()">Click me!</button>',
        scope: {
          onChange: '<'
        },
        link: function(scope, element, attrs) {
          if (angular.isFunction(scope.onChange)) {
            changeFn = scope.onChange;
          }

          scope.bump = bump;
        }
      };
    })
  .controller('HomeCtrl',
    function($scope) {
      $scope.receive = function(value) {
        console.log('receive() called');
        $scope.receivedData = value;
      };
    });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.min.js"></script>
<div ng-app="app" ng-controller="HomeCtrl">
  <passing-function on-change="receive"></passing-function>
  <p>Data from directive: {{receivedData}}</p>
</div>

＆＃13;

这是一个合适的＆＃34; Angular＆＃34;实现这个目标的方式？这似乎有效。

Answer 1

您需要将函数传递给指令。我会做一个很小的例子。

在控制器上：

$scope.thisFn = thisFn(data) { console.log(data); };

在html中：

<my-directive passed-fn="thisFn()"></my-directive>

指令：

.directive('myDirective', [
  () => {
    return {
      restrict: 'E',
      scope: {
        passFn: '&'
      },
      template: '<div id="myDiv" ng-click="passFn(data)"></div>',
      link: (scope) => { 
          scope.data = "test";
      }
    }
  }]);

正确的＆＃34; Angular＆＃34;将行为传递给指令的方法？

1 个答案: