AngularJs - 在使用OO方法处理渲染或模型更新时需要处理数据时的同步视图

Question

在AngularJS中，如果您使用的是面向对象方法，那么当对象实例更改某些数据时，如何更新视图？

我们想象，我们有这个“用户类别”：

function UserFactory(){ 

    User(name, lastName){ 
     this.name = name; 
     this.lastName = lastName; 
    } 

    User.prototype.setName = function(name){ 
     this.name = name; 
    } 

    User.prototype.setLastName = function(LastName){ 
     this.lastName = lastName; 
    } 

    User.prototype.getFullName = function(){ 
     return this.name + " " + this.lastName; 
    } 

    return User; 
} 

angular.module('UserModule',[]) 
     .factory('UserFactory', UserFactory); 

和我们的个人资料页控制器看起来是这样的：

/** 
* 
* The logic for controlling the object is defined in the class 
* 
*/ 

var MyProfileCtrl = function($scope, UserFactory){ 

    var user = new UserFactory("name", "second name"); 

    $scope.user = user; 
} 


angular.module('App.Profile',['UserModule']) 
     .controller('MyProfile', MyProfileCtrl); 

好了，现在我的观点会显示的东西通过访问对象的属性和方法：

<div> 
    <div> 
     <p>Name</p> 
     <input ng-model="user.name"> 
    </div> 

     <div> 
     <p>Last Name</p> 
     <input ng-model="user.lastName"> 
    </div> 

    <div> 
     <p>Full Name</p> 
     <p>{{user.getFullName()}}</p> 
    </div> 
</div> 

由于getFullName返回一个字符串（primitiv e值），名称和姓氏的更新将不会反映到“全名”打印中。你如何处理这个问题？

我一直一直使用普通的JavaScript数据angularjs（意为基本结构{名：“XXX”，名字：“ZZZ”}和投入的观点：

<div> 
    <p>Full Name</p> 
    <p>{{user.name}} - {{user.lastName}} </p> 
</div> 

这样我可以保持我知道我可以使用$手表，但它确实有一点味道。尽管读取所有的时间性能问题，当使用这些。

所以当你想要达到什么需要更多的处理简单的级联？

我试图弄清楚的整个问题是，如何管理数据的预处理，在模型更改时可以触发这些数据，从而使UI保持同步？面向对象是一个坏方法吗？您是否使用服务将数据转换为UI真正需要的内容？

如果这个问题进入另一部分，请让我知道在那里重新安置。

Answer 1

由于getFullName返回一个字符串（原始值），所以名称和姓氏的更新不会反映到“全名”打印中。

是的，它会的。为什么不呢？但是我没有在User中看到setter的重点，因为它们在任何地方都没有使用过。

如何管理数据的预处理，这些数据可以在模型更改时触发，保持UI同步？

您使用上面使用的内容：返回计算值并从视图中调用的函数。或者，如果函数过于复杂并且在每个摘要循环中调用时都会导致性能问题，那么每次输入更改时都会调用它，并将结果存储在作用域中。

为了检测输入的变化，并相应地调用一个函数，你有几种选择：输入

• 使用NG-变化研究部分领域
• 使用ngModelOptions与getterSetter =真
• 使用一块手表