Question

我在理解范围以及控制器中指令和范围之间的关系时遇到了一些麻烦。

我有一个显示这样的导航栏的指令，在导航栏中我想显示一个名称，我使用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尚未设置名称值。因此导航栏获取name = null。然后控制器执行：

localStorage.add("name", name);

并设置名称，如果我刷新页面再次加载导航栏，这次名称存储在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属性一样运行，并附加控制器用来传递数据的东西。
使用@表示它是单向数据绑定字符串。 =建立一个双向约束关系，并且还有＆amp;属性。请参阅此post以了解它们的含义概述
我正在做的另一个区别是我使用var vm = this而不是注入$scope这是现在非常流行的方法，意味着你不要充满了范围汤。但你可以把它看作是一种基本上做同样事情的方法（那是绑定的东西，但它不能听事件，所以请记住）

祝你好运

从AngularJS中的控制器更新指令值

1 个答案: