2016-07-21 4 views
0

Я пытаюсь обновить элемент из директивы размытия, но меняет вид, а не модель.Обновить модель от Angular директивы

app.directive('myDirective', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ctrl) { 
     element.bind('blur', function(e) { 
     element[0].value = 'new val'; 
     }); 
    } 
    }; 
}); 

Я создал простой шлепнуть выдвигая на первый план вопрос: https://plnkr.co/edit/yicenDSHNagapXxP7yrF?p=preview

Многие люди, кажется, есть эта проблема и есть много советов о том, как изменить конкретную модель с использованием функции на объем. Но я хочу, чтобы убрать эту директиву на любой вход, такой жесткий код, модель для изменения не будет работать здесь.

Я пробовал использовать $ apply, как обсуждалось здесь, но это тоже не работает. http://nathanleclaire.com/blog/2014/01/31/banging-your-head-against-an-angularjs-issue-try-this/. Что мне не хватает?

Спасибо,

ответ

1

попробовать это (plunker):

var app = angular.module('myApp', []); 
app.controller('myCtrl', ['$scope', function($scope) { 

    $scope.myVal = 'Demo'; 

}]); 

    app.directive('myDirective', function() { 
     return { 
     require: '^ngModel', 
     scope:{ngModel:'='}, 
     link: function(scope, element, attrs, ctrl) { 
      element.bind('blur', function(e) { 
      scope.ngModel='new val'; 
      scope.$apply(); 
      }); 
     } 
     }; 
    }); 
+0

Совершенные! Что такое '^', когда вам требуется ngModel? Он работает и без него? –

+0

это означает, что для его работы для директивы требуется атрибут ngModel со значением в том же элементе, что и 'myDirective'. Таким образом, параметр 'ctrl' функции ссылки отражается на ngModelController. Для получения дополнительной информации нажмите здесь [NgModelController] (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) –

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