Пользовательская директива Angularjs с использованием переменной контроллера директивы

Я создал пользовательскую директиву, в которой у меня есть массив, который мне нужно использовать в других представлениях. например, скажем, у меня есть поле ввода в моем содержимом директивы, и я должен использовать его значение в другом контроллере, как я могу этого добиться? Я пытался использовать ng-модель, но мне это не удалось.

вот мои контроллеры:

angular.module("demo", []);

angular.module("demo").controller("demoController", function ($scope) {
    $scope.name = "John";
});

angular.module("demo").controller("directiveController", function ($scope) {

    $scope.name = "John Doe";

});


angular.module("demo").directive("passVariable", function () {
    return {
        restrict: 'AEC',
        require: "ngModel",
        templateUrl: "content.html",
        link: function (scope, element, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            },
            function (modelValue) {
                console.log(modelValue);       
            });

        }
    }
});

и HTML-файл:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
    <div>
      <pass-variable ng-model="name"></pass-variable>
    </div>
    <br />
    <div>
        Second directive textbox:       <input type="text" ng-model="name" pass-variable="" />
    </div>
    <br />
    <div>
        Main textbox:       <input type="text" ng-model="name" />
    </div>
  </body>

</html>

и контент.html

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="name"/>
</div>

и вот мой плункер: http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview

Кстати, я не знаю, почему plunker не загружает content.html

ОБНОВЛЕНИЕ Я понял, что должен добавить контроллер в директиву controller: directiveController и удалить ng-controller='directiveController' в content.html


angularjs angularjs-directive angularjs-ng-model
person parand87    schedule 04.03.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно понял, у вас проблема с ng-контроллером в content.html.

<div ng-controller="directiveController">
  Content Textbox: <input type="text" ng-model="name"/>
</div>

как только вы удалите ng-controller, все три поля ввода будут синхронизированы.

причина, по которой это не сработало, заключается в том, что вы определили новый контроллер в шаблоне директивы, который имел свойство $scope.name, затеняющее свойство исходного контроллера.

вот plnkr

person Nitsan Baleli    schedule 04.03.2015
comment
спасибо за Ваш ответ. Я проверил способ, который вы предложили, таким образом, он не использует directiveController, который на самом деле является контроллером директивы, причина, по которой я это сделал, заключалась в том, что у меня есть директива с несколькими задачами и контроллером, и он возвращает массив другому контроллеру, который использует массив, скажем, массив name в directiveController должен быть передан массиву name в demoController. - person parand87; 07.03.2015

arrow_upward
0
arrow_downward

Пожалуйста, попробуйте $parent.name как показано ниже

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="$parent.name"/>
</div>
person Vijay Anand    schedule 12.08.2015