AngularJS 指令使用另一个控制器答案

【问题标题】：AngularJS directive using another controllerAngularJS 指令使用另一个控制器
【发布时间】：2014-07-17 20:17:20
【问题描述】：

我正在尝试创建一个指令，该指令将输出使用来自控制器的数据的 HTML 模板。

在 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-show，数据显示正常）。

在这个简化的示例中，我可以将 ng-show 移动到 HTML 中的 DOM 元素，但在我的实际应用程序中，这不是一个选项。我真的需要我的指令才能使用控制器中的属性（和方法）。

这可能吗？为了让它发挥作用，我错过了什么？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-controller

【解决方案1】：

由于您使用的是隔离作用域，因此您必须声明 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>

【讨论】：

要添加到这个答案，这是来自角度文档：“顾名思义，指令的隔离范围隔离除了您明确添加到范围的模型之外的所有内容：{} hash对象。这在构建可重用组件时很有帮助，因为它可以防止组件更改您的模型状态，但您明确传入的模型除外。"