Я пытаюсь создать директиву, которая будет выводить 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 в элемент DOM в HTML, но в моем реальном приложении это было бы невозможно. Мне действительно нужна моя директива, чтобы иметь возможность использовать свойства (и методы) из моего контроллера.
Это возможно? И что я пропустил, чтобы заставить его работать?