從鏈接功能到控制器功能從內部指令到另一個指令傳遞元素

是否將鏈接函數中的元素傳遞給控制器函數內部指令並將其傳遞給另一個指令作爲其元素？從鏈接功能到控制器功能從內部指令到另一個指令傳遞元素

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

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

從鏈接功能到控制器功能從內部指令到另一個指令傳遞元素

回答

相關問題