2013-12-19 2 views
14

Я пытаюсь создать настраиваемый компонент, который использует динамическую модель 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 В этом примере я ожидаю, что на обоих входах будет значение «Новый», так как я изменяю модель из директивы и является двунаправленной оценкой (=). Но почему-то не связано правильно. :(

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

ответ

38

Нечто подобное

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>',    
     }; 
    }); 
+1

OMG! Большое спасибо, это работает! Это было легче, чем ожидалось! – DreaMTT

+0

Привет, спасибо. Могли ли вы сделать сообщения об ошибках для ввода внутри шаблона директивы? Благодарю. –

+0

Что делать, если я использую 'scope: false'? Потому что я не хочу, чтобы моя директива имела свой собственный объем в этом случае. –

Смежные вопросы