从链接功能到控制器功能从内部指令到另一个指令传递元素

是否将链接函数中的元素传递给控制器函数内部指令并将其传递给另一个指令作为其元素？从链接功能到控制器功能从内部指令到另一个指令传递元素

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

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而且比另一个指令？

编辑：谢谢你们的帮助，我还发现了另一种方式来做到这一点通过factoryunder this link

来源

2015-07-28 vvdfg_mine

我认为你正在寻找孩子指令的方式来获得从父指令的元素。您可以使用通用技术的指令到指令沟通，这样做里子指令能够访问到父指令的控制器：

父目录：

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(); 
    } 
    } 
});

来源

2015-07-28 09:04:38 pixelbits

感谢'$ element'。不知道它存在。 – Akash

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

如果您只需要访问范围，您也可以在子指令中将范围设置为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>

希望这有助于访问父指令的示例。

来源

2015-07-28 09:30:29 AviG

从链接功能到控制器功能从内部指令到另一个指令传递元素

回答

相关问题