Динамическая привязка ng-модели внутри директивы

Я пытаюсь создать пользовательский компонент, который использует динамическую модель ng внутри директивы.

В качестве примера я мог бы вызывать различные компоненты, такие как:

<custom-dir ng-model="domainModel1"></custom-dir>
<custom-dir ng-model="domainModel2"></custom-dir>

С такой директивой:

app.directive('customDir', function() {
  return {
    restrict: 'EA',
    require: '^ngModel',
    scope: {
      ngModel: '=dirValue',
    },
    template: '<input ng-model="dirValue" />',
    link: function(scope, element, attrs, ctrl) {
      scope.dirValue = 'New';
    }
  };
});

Идея состоит в том, что текстовое поле из директивы будет меняться при изменении модели и наоборот.

Дело в том, что я безуспешно пробовал разные подходы, вы можете проверить один из них здесь: http://plnkr.co/edit/7MzDJsP8ZJ59nASjz31g?p=preview В этом примере я ожидаю получить значение «Новый» в обоих входных данных, так как я меняю модель из директивы и является би -направленная граница (=). Но как-то не связан в правильном пути. :(

Я буду очень признателен, если кто-то прольет свет на это. Заранее спасибо!


angularjs angularjs-directive angularjs-scope
person DreaMTT    schedule 19.12.2013    source источник

Ответы (1)


arrow_upward
41
arrow_downward

Что-то вроде этого?

http://jsfiddle.net/bateast/RJmhB/1/

HTML:

<body ng-app="test">
    <my-dir ng-model="test"></my-dir>
    <input type="text" ng-model="test"/>
</body>

JS:

angular.module('test', [])
    .directive('myDir', function() {
        return {
            restrict: 'E',
            scope: {
                ngModel: '='
            },
            template: '<div><input type="text" ng-model="ngModel"></div>',            
        };
    });
person Banana-In-Black    schedule 19.12.2013
comment
Привет, спасибо за это. Удалось ли вам заставить сообщения об ошибках работать для ввода внутри шаблона директивы? Спасибо. - person Hugo Chan; 02.05.2014
comment
Что, если я использую scope: false? Потому что я не хочу, чтобы моя директива в этом случае имела свою область действия. - person Saeed Neamati; 08.06.2016
comment
См. это jsfiddle. Все, что я сделал, это переключил scope на false, то есть scope: false - person Saeed Neamati; 08.06.2016