Хобрук: Ваш путь к мастерству в программировании

Как передать переменные модели из одной директивы в другую, используя один и тот же контроллер для обеих директив?

Допустим, у меня есть контроллер A:

app.controller('A', function($scope) {
    $scope.commonvalue = "";
})

app.directive('dir1', function() {
    return {
        restrict: 'E',
        templateUrl: 'template1.html',
        controller: 'A'
    };
});

app.directive('dir2', function() {
    return {
        restrict: 'E',
        templateUrl: 'template2.html',
        controller: 'A'
    };
});

DIR1 template1.html:

<label>Enter value: </label>
<input ng-model="commonvalue"> </input>

DIR2 template2.html:

<p> The value of commonvalue variable is {{ commonvalue }} </p>

Все, что я хочу сделать, это изменить значение commonvalue из dir1 и получить его значение в dir2. Одним из решений является создание переменной commonvalue в $rootScope. но я не хочу этого делать. Я хочу изменить его только в области действия контроллеров «А».

angularjs angularjs-directive angularjs-scope
10.09.2015

Ответы:


1

Вы можете попробовать что-то вроде этого.

<div ng-app="myapp" ng-controller="myCtrl">
    <my-changer ng-model="someVal"></my-changer>
    <my-receiver ng-model="someVal"></my-receiver>
</div>

angular.module("myapp", [])
.controller("myCtrl", function($scope){
    $scope.someVal = "Hello";
}).directive("myChanger", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    };
}).directive("myReceiver", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    }
});

JSFiddle

--РЕДАКТИРОВАТЬ---

Если вы ищете одностороннюю привязку, сделайте это.

angular.module("myapp", [])
.controller("myCtrl", function($scope){
    $scope.someVal = "Hello";
}).directive("myChanger", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    };
}).directive("myReceiver", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<p ng-bind='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    }
});

Обновлен JSFiddle

10.09.2015

2

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

см. этот plnkr

app.controller('MainCtrl', function($scope) {
    $scope.obj = {};
    $scope.obj.commonvalue = "initial value";
});


app.directive('dir1', function() {
    return {
        restrict: 'A',
        templateUrl: 'dir1.html'
    }
})

app.directive('dir2', function() {
    return {
        restrict: 'A',
        templateUrl: 'dir2.html'
    }
})

Я обновил ответ, чтобы использовать «точечную» ng-модель, я думаю, что сначала это была ваша проблема. Вы можете просмотреть мой ответ, где объясняется, почему это важно.

из ответа:

Что происходит, так это то, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем.

10.09.2015
  • но изменение поля ввода в директиве 1 не отражается в директиве 2. проверьте мой код еще раз, с вашей точки зрения, он должен работать, но это не так. в директиве 2 значение переменной commonvalue не определено. 10.09.2015

    • 3

    Вы можете определить переменную области действия с помощью '=' char в своих директивах и передать им 'commonvalue': https://jsbin.com/fobofepuji/1/edit?html,js,output

    10.09.2015
    Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..