Директива AngularJS с использованием другого контроллера

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

Это возможно? И что я пропустил, чтобы заставить его работать?


javascript angularjs angularjs-directive angularjs-controller
person user3848690    schedule 17.07.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы используете изолированную область, вам нужно объявить 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>
person Edminsson    schedule 17.07.2014
comment
Чтобы добавить к этому ответу, это из документации angular: как следует из названия, изолировать область действия директивы изолирует все, кроме моделей, которые вы явно добавили в область действия: {} hash object. Это полезно при создании повторно используемых компонентов, поскольку предотвращает изменение состояния модели компонентом, за исключением моделей, которые вы явно передаете. - person Matt M; 17.07.2014