Может ли кто-нибудь объяснить основную концепцию модели в angularjs?

Question

HTML код:

<mydirective></mydirective> 
<input type="button" ng-click="showText()" value="Show Service Text" /> 

Js Код:

var app = angular.module('demo', []); 
    app.service('myService', function() { 
     var text = { id: 1, value: 'hello' }; 

     this.getText = function() { 
      return text; 
     } 
    }); 
    app.controller('demoController', ['$scope', 'myService', function ($scope, myService) { 
     $scope.showText = function() { 
      alert(myService.getText().value); 
     } 
    }]); 

Теперь я покажу 2 версии моей директивы:
1) Первая версия:

app.directive('mydirective', function() { 
      var controller = ['$scope', 'myService', function ($scope, myService) { 
       $scope.randomtext = myService.getText(); 
      }]; 

      var template = '<div><input type="text" ng-model="randomtext.value" /><span ng-bind="randomtext.value"></span></div>' 

      return { 
       restrict: 'E', 
       scope: {}, 
       controller: controller, 
       template: template 
      }; 
     }); 

Fiddle Link

Когда я используйте это, тогда переменная службы обновляется при обновлении поля ввода.

2) Вторая версия:

app.directive('mydirective', function() { 
      var controller = ['$scope', 'myService', function ($scope, myService) { 
       $scope.randomtext = myService.getText().value; 
      }]; 

      var template = '<div><input type="text" ng-model="randomtext" /><span ng-bind="randomtext"></span></div>' 

      return { 
       restrict: 'E', 
       scope: {}, 
       controller: controller, 
       template: template 
      }; 
     }); 

Fiddle Link

Когда я использую, как это то переменная служба не обновляется по обновлению поля ввода.
Может ли кто-нибудь объяснить, почему поведение такое?

Answer 1

Это проблема с Javascript, а не проблема AngularJS. У вас возникают проблемы с различием между ссылочным типом и значением примитивного типа.

В приведенном ниже примере следует очистить недоразумение:

var myObject = { 
 
    value: 1 
 
}; 
 

 
var $scope = {}; 
 

 
$scope.data = myObject; 
 

 
$scope.data.value = 3; 
 

 
// This should alert the value of 3 
 
window.alert(myObject.value);

Сниппет выше должен предупредить значение 3, так как вы меняете значение reference из myObject, который был принят в $scope.data ,

Проверьте приведенный ниже пример и он должен показать вам, что примитивные значения не работают таким образом.

var myObject = { value: 1 }; 
 
var $scope = {}; 
 

 
$scope.data = myObject.value; 
 

 
$scope.data = 3; 
 

 
// This should alert the value of 1 
 
window.alert(myObject.value);

Answer 2

Первая версия (рабочая один)

$scope.randomtext = myService.getText(); 

Это делает $ scope.randomtext ссылкой на тот же текстовый объект в вашей службе, поэтому, когда $ сфера .randomtext изменяется с вашим полем ввода, текстовый объект в сервисе также изменится, и вы получите обновленное значение, когда будете его предупреждать.

Второй вариант (тот, который не работает)

$scope.randomtext = myService.getText().value; 

в этой версии $ scope.randomtext НЕ является ссылка на текстовый объект, оператор присваивания создает новую копию свойства значения в $ scope.randomtext, что делает его совершенно новой переменной, которая никак не связана с сервисом, поэтому всякий раз, когда вы меняете случайный текст в своем поле ввода, объект в myservice ничего не почувствует.