将 link 函数中的元素传递给指令内的控制器函数，然后再传递给另一个指令

Question

是否有一种方法可以将元素从 link 函数传递到指令内部的控制器函数，而不是传递给另一个指令作为其元素？

我的意思是我有一个指令：

angular.module('myApp').directive('parentDir', function() {
  return {
    restrict: 'E',
    link: function (scope, element, attributes) {
    element = //some HTML code
    },
    controller: function ($scope) {
      this.elem = function () {
        $scope.elem = element;
      }
    }
  }
});

然后我有另一个指令，我想在其中获取 $scope.elem。

angular.module('myApp').directive('childDir', function() {
  return {
    restrict: 'E', 
    link: function (scop, elmn, attr){

    // HOW TO GET THE $scope.elem here as elmn ?
    elmn = $scope.elem ?

    }
  }
});

是否可以将 element 传递给 $scope.elem 而不是另一个指令？

编辑：感谢大家的帮助，我还通过 factory under this link

找到了另一种方法

Answer 1

我认为您正在寻找一种方法让子指令从父指令获取元素。您可以使用指令到指令通信的通用技术来执行此操作，其中子指令可以访问父指令的控制器：

父目录：

angular.module('myApp').directive('parentDir', function() {
  return {
    restrict: 'E',
    link: function (scope, element, attributes) {
       element = //some HTML code
    },
    controller: function ($scope, $element) {
      this.elem = function () {
          return $element;
      }
    }
  }
});

子指令：

angular.module('myApp').directive('childDir', function() {
  return {
    restrict: 'E', 
    require: '^parentDir',
    link: function (scop, elmn, attr, parentCtrl){    
         var parentElmn = parentCtrl.elem(); 
    }
  }
});

Answer 2

这实际上取决于您要实现的目标。如果你想从子控制器访问父控制器，那么最好的选择是使用 require 并在子控制器的 link 函数中注入父控制器。

如果您只需要访问范围，您也可以在子指令中将范围设置为false。但随着您的代码变得越来越复杂，这种方法可能会导致一些混乱。

下面是一个示例，说明如何从子指令访问父指令（我的首选方法）

angular.module('app', [])
  .directive('parentDir', function() {
    return {
      restrict: 'E',
      template: '<div style="background: yellow">This is the parent dir and value is <strong>{{ val }}</strong><div ng-transclude></div></div>',
      transclude: true,
      replace: true,

      controller: function($scope, $element) {
        $scope.val = true;

        this.element = $element;

        this.updateVal = function(newVal) {
          $scope.val = newVal
        }
      }
    }
  })
  .directive('childDir', function() {
    return {
      restrict: 'E',
      require: '^parentDir',
      replace: true,
      template: '<div class="append" style="background: red; margin: 15px"><h5>This is the child dir</h5><button ng-click="change()">change parent scope</button></div>',
      link: function(scope, element, attr, parentCtrl) {

        //if you want access to the parent element
        var parentElem = parentCtrl.element;

        //if you want to execute a function in the parent directive
        scope.change = function() {
          //note that because of protoypical inheritance, scope.val can be accessed in the child directive
          parentCtrl.updateVal(!scope.val)
        }
      }
    }
  });

<html ng-app='app'>

<head>
  <script src='https://code.angularjs.org/1.3.15/angular.js'></script>
  <script src='script.js'></script>
</head>

<body>
  <parent-dir>

    <child-dir>

    </child-dir>

  </parent-dir>
</body>

</html>

希望这对您有所帮助。

将 link 函数中的元素传递给指令内的控制器函数，然后再传递给另一个指令

Pass element from link function to controller function inside directive and than to another directive

javascript

scope

directive

hyperlink

angularjs