AngularJS指令使用另一個控制器

我想創建一個指令，將輸出使用控制器中的數據的HTML模板。AngularJS指令使用另一個控制器

在sample.js我添加了一個模塊，控制器和指令

var app = angular.module("myApp", []); 

app.controller("MyCtrl", function($scope) { 
    $scope.someProperty = true; 
}) 

app.directive("myElement", function() { 
    return { 
     restrict: "E", 
     scope: {name: "@"}, 
     template: 
      '<div ng-show="someProperty">' + 
      ' <p>This element is called {{name}}</p>' + 
      '</div>', 
     replace : true, 
     transclude : false 
    } 
})

我使用的元件有以下HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
     <meta charset="UTF-8"> 

     <script type="text/javascript" src="angular.min.js"></script> 
     <script type="text/javascript" src="sample.js"></script> 
    </head> 
    <body ng-controller="MyCtrl"> 
     <div><my-element name="Mark"></my-element></div> 
     <div><my-element name="Vink"></my-element></div> 
    </body> 
</html>

由於控制器在體內創建，我希望子元素能夠使用它的屬性/方法。但沒有數據顯示（沒有ng顯示，數據顯示正常）。

在這個簡化的示例中，我可以將ng-show移動到HTML中的DOM元素，但在我的實際應用程序中，這不是一個選項。我真的需要我的指令能夠使用我的控制器的屬性（和方法）。

這可能嗎？我錯過了什麼讓它起作用？

來源

2014-07-17 user3848690

由於您使用您必須聲明一個孤立的範圍someProperty使用它像這樣

app.directive("myElement", function() { 
    return { 
     restrict: "E", 
     scope: { 
      name: "@", 
      someProperty: "=" 
     }, 
     template: 
      '<div ng-show="someProperty">' + 
      ' <p>This element is called {{name}}</p>' + 
      '</div>', 
     replace : true, 
     transclude : false 
    } 
});

，你可以用它像這樣

<my-element name="Vink" some-property="someProperty"></my-element>

來源

2014-07-17 12:17:20 Edminsson

要添加到這個答案，這是從角度記錄：「顧名思義，指令的隔離範圍隔離除了您已經明確添加到範圍的模型之外的所有內容：{} hash對象，這在構建可重用組件時非常有用，因爲它可以防止組件更改您的模型狀態除了喲模型你明確地通過。「 –

AngularJS指令使用另一個控制器

回答

相關問題