Question

我创建了一个指令。

angular.module('app')
  .directive('navtree', function (service) {

    return {
      restrict: 'A',
      scope: {},
      link: function (scope, el) {

        scope.loadNavtree = function(){
          service.data()
              .then(function (data) {
                 ///Do something
              });
        }

        scope.loadNavtree();

      }
    };
  });

从我的控制器

我可以使用

访问该方法

$scope.$parent.$$childHead.loadNavtree();

虽然这是有效的，但我觉得这不是正确的做法。我想了解从你的控制器访问指令中定义的函数的缺点是什么。

我看了link，但我无法关注

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   /// How to call takeTablet() available in directive from here?
});

    app.directive('focusin', function factory() {
      return {
        restrict: 'E',
        replace: true,
        template: '<div>A:{{internalControl}}</div>',
        scope: {
          control: '='
        },
        link      : function (scope, element, attrs) {

          scope.takeTablet = function() {
            alert('from directive');// 
          }
        }
      };
    });

Answer 1

这不是正确的方法，因为angular不建议使用其私有变量来访问指令函数，因此您需要获得一个好的方法来执行此操作，这是从控制器访问指令函数的示例。

如果要使用隔离范围，可以使用控制器范围内变量的bi-directional绑定('=')来传递控制对象。通过这种方式，您还可以在页面上控制同一指令的多个实例。

plunkr

<强>控制器/指令：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {
  };
});

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link      : function (scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;  
      }
    }
  };
});

<强> HTML：

<button ng-click="focusinControl.takeTablet()">Call directive function</button>
<h4>In controller scope:</h4>
{{focusinControl}}
<h4>In directive scope:</h4>
<focusin control="focusinControl"></focusin>
<h4>Without control object:</h4>
<focusin></focusin>

使用$ scope。$ parent。$ childHead.functionName在AngularJS

1 个答案: