Question

我试图创建一个指令，输出一个使用控制器数据的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>

由于控制器是在body中创建的，我希望child-element能够使用它的属性/方法。但是没有数据显示（没有ng-show，数据显示正常）。

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

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

Answer 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>

AngularJS指令使用另一个控制器

1 个答案: