Question

我的情况如下：

控制器A＆gt;＆gt;指令“父”＆gt;＆gt;指令“孩子”

控制器B＆gt;＆gt;指令“父”＆gt;＆gt;指令“孩子”

这两个指令都有孤立的范围，我不能使用包含。

Controller A定义一个向下传递给child指令的函数（在两个指令中使用“＆amp;？”表示法）。

<div parent fx="doFx()"></div>

控制器B没有指定该功能。

<div parent></div>

父指令只是将函数传递给子指令。

<div child fx="doFx()"></div>

如何检查子指令中的（不访问父级的范围）控制器是否确实传递了函数？

提前感谢任何指针！

Answer 1

有可能将第三个参数传递给链接函数。

angular.module('app', []);

angular.module('app').controller('Example', function () {
  this.fn1 = function () {
    return true;
  };
});

angular.module('app').directive('someDir', function () {
  return {
    restrict: 'E',
    template: '{{isPassed}}',
    scope: {
      fx: '&'
    },
    link: function (scope, element, attrs) {
      scope.isPassed = attrs['fx'] !== undefined && attrs['fx'].length > 0;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="Example as Ex">
  A: <some-dir></some-dir> <br>
  B: <some-dir fx></some-dir><br>
  C: <some-dir fx="Ex.fn1"></some-dir>
</div>

编辑：您还可以使用特定的返回值。

const PASSED = 'PASSED';

angular.module('app', []);

angular.module('app').controller('Example', function() {
  this.fn1 = function() {
    return PASSED;
  };
});

angular.module('app').directive('parent', function () {
  return {
    restrict: 'E',
    template: '<child fx="fx()"></child>',
    scope: {
      fx: '&'
    }
  };
});

angular.module('app').directive('child', function () {
  return {
    restrict: 'E',
    template: '{{isPassed}}',
    scope: {
      fx: '&'
    },
    link: function (scope) {
      scope.isPassed = scope.fx() === PASSED;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="Example as Ex">
  A: <parent></parent><br>
  B: <parent fx="Ex.fn1()"></parent><br>
</div>

但在我看来，最好的解决方案是使用第一个attrs检查fx是否通过并明确地将isPassed传递给child指令。

angular.module('app', []);

angular.module('app').controller('Example', function() {
  this.fn1 = function() {};
});

angular.module('app').directive('parent', function () {
  return {
    restrict: 'E',
    template: '<child fx="fx()" is-passed="isPassed"></child>',
    scope: {
      fx: '&'
    },
    link: function (scope, element, attrs) {
      scope.isPassed = attrs['fx'] !== undefined && attrs['fx'].length > 0;
    }
  };
});

angular.module('app').directive('child', function ($timeout) {
  return {
    restrict: 'E',
    template: '{{isPassed}}',
    scope: {
      fx: '&',
      isPassed: '<'
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="Example as Ex">
  A: <parent></parent><br>
  B: <parent fx="Ex.fn1()"></parent><br>
</div>

检查控制器是否已将可选功能传递给* child *指令

1 个答案: