Обновление значения директивы от контроллера в AngularJS

Question

У меня немного проблем понимания областей и отношения между областями в директиве и объеме в контроллере ..

У меня есть директива, отображающее Navbar, как это в навигационной панели я хочу, чтобы отобразить имя, что я хранится с использованием LocalStorage

(function (module) { 

    var navbar = function() { 

     return { 
      restrict: "AE", 
      controller: function ($scope, localStorage) { 
       $scope.name = localStorage.get("name"); 
      }, 
      templateUrl: "/app/NSviewer/templates/nav.html" 
     }; 

    }; 

    module.directive("navbar", navbar); 

}(angular.module("anbud"))); 

Теперь, когда эта страница загружается в первый раз LocalStorage не установить значение имени. Поэтому navbar получает имя = null. Затем контроллер делает:

localStorage.add("name", name); 

и имя задано, если я обновить страницу, Navbar загружается снова, на этот раз имя хранится в LocalStorage и отображается правильно.

Так что я хочу сделать что-то вроде $scope.name = 'John Smith' в контроллере, а затем обновить директиву/навигацию.

Answer 1

Сохранение значения, которое должно использоваться совместно с контроллером и директивой в локальном хранилище, является излишним. Как правило, вы делаете следующее:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .directive('dashboard', dashboard); 

    function dashboard() { 

    var directive = { 
     restrict: 'E', 
     controller: 'DashboardController', 
     controllerAs: 'vm', 
     bindToController: { 
     msg: '@' 
     }, 
     scope: {}, 
     templateUrl: '/templates/dashboard/dashboard.html' 
    }; 

    return directive; 
    } 

    angular 
    .module('app') 
    .controller('DashboardController', DashboardController); 

    DashboardController.$inject = []; 

    function DashboardController(){ 
    var vm = this; 
    vm.msg = 'Hello World'  
    } 
})(); 

Некоторые вещи, чтобы отметить:

• bindToController может принимать объект. Это то, что может принимать только булево пред угловое 1.4. Теперь он может действовать так же, как и свойство scope, и приложить материал, который будет использоваться вашим контроллером для передачи данных.
• Использование @ означает, что это строковая строка, связанная с одним способом. = устанавливает двустороннюю связанную связь, а также свойство &. См. Это post для обзора того, что все они означают.
• Еще одно отличие от того, что я делаю, это то, что я использую var vm = this, а не впрыскивание $scope Это довольно популярный подход в настоящее время и означает, что вы не получите пронизанного суп с супом. Но вы можете думать об этом как способ сделать то же самое по существу (что является обязательным материал, но он не может прослушивать события так, пожалуйста, помните, что)

Успехов