Динамично обвързване на 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