谁能解释一下angularjs中模型的核心概念？答案

【问题标题】：Can anyone explain the core concept of model in angularjs?谁能解释一下angularjs中模型的核心概念？
【发布时间】：2016-04-01 14:17:42
【问题描述】：

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

当我这样使用时，服务变量不会在更新输入字段时更新。
谁能解释为什么会这样？

【问题讨论】：

有任何答案回答您的问题。请接受它以成为未来读者的参考。

标签： angularjs angularjs-directive angularjs-scope angularjs-service angular-directive

【解决方案1】：

第一个版本（工作版）

$scope.randomtext = myService.getText();

这使得 $scope.randomtext 成为对您服务中相同文本对象的引用，因此，每当您的输入字段更改 $scope.randomtext 时，服务中的文本对象也会发生变化，并且您会在您获得更新后的值提醒它。

第二个版本（不工作的那个）

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

在这个版本中，$scope.randomtext 不是对文本对象的引用，赋值运算符会在 $scope.randomtext 中创建 value 属性的新副本，使其成为一个全新的变量，与服务，因此每当您更改输入字段中的随机文本时，myservice 中的对象都不会感觉到任何东西。

【讨论】：

【解决方案2】：

这是一个 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);

上面的 sn-p 应该提醒 3 的值，因为您正在更改传递给 $scope.data 的 myObject 的 reference 值。

查看下面的示例，它应该会告诉您原始值不是这样工作的。

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

$scope.data = myObject.value;

$scope.data = 3;

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

【讨论】：