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);
        }
    }]);

现在，我将展示我的指令的两个版本：
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问题。您在区分引用类型值和基本类型值方面遇到了问题。

下面的例子应该清除误解：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script>



<div id="pa-map" style="width: 100%; height: 470px"></div>

上面的代码段会提醒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的{{1}} reference值。

检查下面的示例，它应该显示原始值不起作用。

myObject

Answer 2

第一个版本（工作版）

$scope.randomtext = myService.getText();

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

第二个版本（无法使用的版本）

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

在这个版本中，$ scope.randomtext不是对文本对象的引用，赋值运算符在$ scope.randomtext中创建value属性的新副本，使其成为一个全新的变量，不与任何方式绑定服务，所以每当你在输入字段中更改randomtext时，myservice中的对象都不会有任何感觉。

谁能解释angularjs中模型的核心概念？

2 个答案: