Question

我有一个工厂，其中包含登录到我的应用程序的用户的所有信息。为了解决这个问题，我删除了很多不必要的代码。

angular.module('app-user', []).factory('$user', function() {
    var biography = '';
    return {
        biography: biography
    }
});

angular.module('app', ['app-user']).controller('controller', function($scope, $user) {
  
  $scope.biography = $user.biography;
  
  $scope.test = function() {
    console.log("Scope: " + $scope.biography + "\nFactory: " + $user.biography);
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <input type="text" ng-modal="biography" placeholder="Click here to edit biography">
  <button ng-click="test()">Click here to log to console</button>
  <br>
  Biography: {{biography}}
</div>

正如您所看到的，即使我使用ng-modal链接到该变量，它也不会在$scope或$user服务中进行更新。

Answer 1

首先，在您的HTML中，将ng-modal更改为ng-model。（这就是为什么$ scope.biography没有更新的原因）。

另外，当你将一个字符串变量分配给另一个时，它会复制该值，而不是引用它。

您可以尝试这样的事情：

angular.module('app-user', []).factory('$user', function() {
    var biography = {value: ''};
    return {
        biography: biography
    }
});

angular.module('app', ['app-user']).controller('controller', function($scope, $user) {

  $scope.biography = $user.biography;

  $scope.test = function() {
    console.log("Scope: ", $scope.biography,"\nFactory: ", $user.biography);
  };

});

HTML：

<div ng-app="app" ng-controller="controller">
  <input type="text" ng-model="biography.value" placeholder="Click here to edit biography">
  <button ng-click="test()">Click here to log to console</button>
  <br>
  Biography: {{biography.value}}
</div>

JSFiddle：https://jsfiddle.net/u9sam73e/

Answer 2

你在做什么

$scope.biography = $user.biography;

将工厂传记的价值分配给范围的传记

这不会起到双向约束的作用。

只有Date,function,object,array才能保留参考。

试试这个

$scope.model= $user;

HTML

<input type="text" ng-model="model.biography" placeholder="Click here to edit biography">

使用ng-modal更新工厂中的值

2 个答案: