AngularJS: Манипулировать $ scope неизвестного элемента $

Question

Новый для углового. Я создаю директиву (атрибут) для глобального использования через весь проект. Я использую локальную функцию хранения, и мое намерение состоит в том, чтобы элемент, на котором расположен этот атрибут, соответствующим образом изменил его значение/текст. Вот HTML:

<input type="email" name="username" placeholder="Email Address" ng-model='username' loadstorage="USERNAME" /> 

Вот директива:

.directive("loadstorage", function (localStorage) { 
     return function ($scope, $element, attrs) { 
      $scope.$element = localStorage.get(attrs.loadstorage); 
     } 
}); 

Как вы можете себе представить, это не работает. Поэтому мне нужен способ манипулировать областью действия элемента, вызывающего функцию. То, что я пытался до сих пор:

$element.val(localStorage.get(attrs.loadstorage)); 

Это работает, но только тогда, когда я удаляю нг-модель элемента, к сожалению, мне это нужно для других целей проекта.

angular.element($element).scope(); 

С этим я обращаюсь к области действия, но не могу ее манипулировать. Вот пример плункера, о котором я говорю: http://plnkr.co/edit/FScDaj4YDIae8ZEs9ucx?p=preview Любая помощь будет оценена по достоинству.

Answer 1

Ваша директива должна, вероятно, управлять значением через контроллер ngModel (docs):

.directive("loadstorage", function (localStorage) { 
    return { 
     require: ["ngModel"], 
     link: function(scope, element, attrs, controllers) { 
      var ngModel = controllers[0], 
       val = localStorage.get(attrs.loadstorage); 
      element.val(val); 
      ngModel.$setViewValue(val); 
     } 
    }; 
}); 

См раздвоенный звенеть: http://plnkr.co/edit/DZwTgrVNeLIbLXryscPy