Javascript 使用另一个控制器的AngularJS指令_Javascript_Angularjs_Angularjs Directive_Angularjs Controller

Javascript 使用另一个控制器的AngularJS指令

javascript angularjs

Javascript 使用另一个控制器的AngularJS指令,javascript,angularjs,angularjs-directive,angularjs-controller,Javascript,Angularjs,Angularjs Directive,Angularjs Controller,我正在尝试创建一个指令，该指令将输出一个HTML模板，该模板使用来自控制器的数据在sample.js中，我添加了一个模块、控制器和指令 var app = angular.module("myApp", []); app.controller("MyCtrl", function($scope) { $scope.someProperty = true; }) app.directive("myElement", function() { return {

我正在尝试创建一个指令，该指令将输出一个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
    }
})

var-app=angular.module（“myApp”，[]）；
app.controller（“MyCtrl”，函数（$scope）{
$scope.someProperty=true；
})
应用程序指令（“myElement”，函数（）{
返回{
限制：“E”，
作用域：{name:@}，
模板：
'' +
“此元素称为{{name}”+
'',
替换：正确，
排除：错误
}
})

我将该元素与以下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元素，但在我的实际应用程序中，这不是一个选项。我真的需要我的指令能够使用控制器中的属性（和方法）

这可能吗？我错过了什么让它工作呢？

因为您使用的是一个独立的作用域，所以必须声明一些属性才能像这样使用它

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>

app.directive（“myElement”，function（））{
返回{
限制：“E”，
范围：{
名称：“@”，
someProperty:“”
},
模板：
'' +
“此元素称为{{name}”+
'',
替换：正确，
排除：错误
}
});

你可以这样使用它

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>

为了补充这个答案，这是angular文档中的内容：“顾名思义，指令的隔离范围隔离了除您显式添加到范围中的模型之外的所有内容：{}哈希对象。这在构建可重用组件时很有用，因为它可以防止组件更改您的模型状态，但您显式传入的模型除外。”