Fatal编程技术网

Javascript AngularJS getter/setter

javascript angularjs

Javascript AngularJS getter/setter,javascript,angularjs,setter,getter,Javascript,Angularjs,Setter,Getter,我正在学习angular，并试图找出使用getter/setter的最佳解决方案 也就是说，我正在使用一个公开getter和setter的库（正如Moment.js所做的那样） 我尝试了几种方法来对付能手和二传手，如下所示： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Example - example-n

我正在学习angular，并试图找出使用getter/setter的最佳解决方案

也就是说，我正在使用一个公开getter和setter的库（正如Moment.js所做的那样）

我尝试了几种方法来对付能手和二传手，如下所示：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Example - example-ngModel-getter-setter-production</title>
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js">    </script>
  <script src="app.js"></script>
</head>

<body ng-app="getterSetterExample">
  <div ng-controller="ExampleController">
    <form name="userForm">
      Name :
      <input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name1:
      <input type="text" name="userName1" ng-model="user1.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name2:
      <input type="text" name="userName2" ng-model="user2.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name3:
      <input type="text" name="userName3" ng-model="user3.name" ng-model-options="{ getterSetter: true }" />
    </form>
    <pre>user.name =         <span ng-bind="user.name()"></span>
      </pre>
    <pre>user1.name =        <span ng-bind="user1.name()"></span>
      </pre>
    <pre>user2.name =        <span ng-bind="user2.name()"></span>
      </pre>
    <pre>user3.name =        <span ng-bind="user3.name()"></span>
      </pre>
  </div>
</body>

</html>
您可以在这里尝试：

2个问题：

user1试图直接使用name1对象提供的getter/setter，它不能正常工作，您能解释一下原因吗

有没有办法避免像我在user3中所做的那样为每个getter/setter重写“代理”？使用外部库提供的getter/setter的最佳方法是什么

谢谢你的帮助

user1试图直接使用name1对象提供的getter/setter，它不能正常工作，您能解释一下原因吗

问题在于上下文，您只是通过执行以下操作复制函数引用
name1.name
：-

因此，当它运行时，getter中的这个实际上会指向
窗口
/global（在非严格模式下）。您可以通过使用解决此问题

例如：-

有没有办法避免像我在user3中所做的那样为每个getter/setter重写“代理”

我只需要创建一个包装器，这样就不会遇到这样的上下文问题

或者只是

我担心作用域。您指出错误是执行过程中的错误作用域。我尝试修改代码，将name2包含在作用域中，如下所示：我将var name2替换为$scope.name2，并修改了index.html ng model=“name2.name”。我希望通过将此绑定到范围来解决范围问题。错误在哪里？“您指出错误在执行过程中是错误的作用域”我不是指
this
所指的错误上下文。我不明白你的意思。你能把你的代码粘贴到plunker中吗？我在这里编辑了代码（第8版）——看看index.html中的第20行和app.js中的第18行。我希望它在执行时绑定到$scope。@ChrisDunom实际上不是。。查看angular code
if（ctrl.$options&&ctrl.$options.getterSetter&&isFunction（modelValue））{modelValue=modelValue（）；}
中的行。基本上，函数引用是
modelValue
，它只是在没有上下文的情况下执行。它只是正在执行的函数引用的副本。当我们在无法控制执行上下文的代码段中使用
This
时，这总是一个问题。感谢您的澄清。 
  angular.module('getterSetterExample', [])
    .controller('ExampleController', ['$scope',
      function($scope) {
        var _name = 'Brian';
        var _name3 = 'Joe';


        var name1 = {
          _name: 'George',
          name:function(newName) {
            if (angular.isDefined(newName)) {
              this._name = newName;
            }
            return this._name;
          }
        };

        var name2 = {
          _name: 'Michael',
          name:function(newName) {
            if (angular.isDefined(newName)) {
              this._name = newName;
            }
            return this._name;
          }
        };

        var name3 = {
          name:function(newName) {
            if (angular.isDefined(newName)) {
              _name3 = newName;
            }
            return _name3;
          }
        };

        $scope.user = {
          name: function(newName) {
            if (angular.isDefined(newName)) {
              _name = newName;
            }
            return _name;
          }
        };

        $scope.user1 = {
          name: name1.name
        };

        $scope.user2 = {
          name: function(newName) {
            return name2.name(newName);
          }
        };

        $scope.user3 = {
          name: name3.name
        };

      }
    ]);

    $scope.user1 = {
      name: name1.name
    };

    $scope.user1 = {
      name: name1.name.bind(name1)
    };

    $scope.user = getModel('name', 'Brian');

    $scope.user1 = getModel('name', 'George');

    $scope.user2 = getModel('name', 'Michael');

    $scope.user3 = getModel('name', 'Joe');

    $scope.address = getModel('address');


  //You can improve this by passing an optional getter functionality as well for some specific evaluation on the value when set.
  function getModel(propertyName, defValue) {
      var obj =  {};

      obj._defVal = defValue;
      obj[propertyName] = function(newVal){
        if (angular.isDefined(newVal)) {
          obj[prop] = newVal;
        }
        return obj[prop];
      }

      return obj;
    }
   }

 function getModel(propertyName, defValue) {
      var obj =  {};
       var propValue = defValue;
      obj[propertyName] = function(newVal){
        if (angular.isDefined(newVal)) {
          propValue = newVal;
        }
        return propValue;
      }
      return obj;
    }
  }