Угловая услуга, не обновляющая вид

Question

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

MainCtrl:

angular 
     .module('myQuiz') 
     .controller('MainController', ["CONSTANTS", 'User', MainController]); 

    function MainController(CONSTANTS, User) { 

     vm = this; 

     vm.title = CONSTANTS.TITLE; 

     vm.user = User.name;  
    }; 

values.js

angular 
    .module('myQuiz') 
    .value("User", { 
     name: "John Doe" 
    }); 

И HomeCtrl, который является потомком mainctrl:

angular 
     .module('myQuiz') 
     .controller('HomeController', ['$scope', '$location', 'User', HomeController]); 

    function HomeController($scope, $location, User) { 

     $scope.test = "Enter your name to start the quiz"; 

     $scope.user; 

     function startQuiz (name) { 
      setUserName(name); 
      return $location.path('/quiz'); 
     } 

     function setUserName(name) { 
      User.name = name; 
      console.log(User.name); 
     } 

     $scope.startQuiz = startQuiz; 



    }; 

В mainctrl он показывает John Doe, но когда i console log it, он показывает правильный ввод. Почему он не обновляется? KG

Answer 1

vm.user = User.name; - ;

Это связано с тем, что вы пытаетесь привязать к примитивному типу данных (String). Вместо этого вам нужно привязать объект. Вот довольно хорошее объяснение, почему:

Область наследование обычно просто, и вы часто даже не нужно знать, что происходит ... пока не попробуете связывание 2-ходовые данные (то есть, форму элементы, ng-model) с примитивным (например, числом, строкой, булевым), определенным в родительской области изнутри дочерней области. Это не работает так, как многие ожидают, что он должен работать. Случается, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не то, что делает AngularJS - так работает прототипное наследование JavaScript.

источник: https://github.com/angular/angular.js/wiki/Understanding-Scopes.

Вот еще одна статья, которая может быть немного легче следовать: http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/