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指令使用另一个控制器

回答

相关问题