Question

我无法让getterSetter在ng-model指令中工作。请看这个plunker：http://plnkr.co/edit/Tx0nyvvbuKqf1ZpsRTPu?p=preview

如果您使用未注释的模板，该示例的行为就好像它不理解getSet（）是它应该调用的函数。

如果您取消注释其他模板（并注释掉第一个模板），则输入会按预期连接到{{}}。

为什么getterSetter无法正常工作？

谢谢你的帮助！

这是代码：

的javascript：

var app = angular.module('app', [])

.controller('ctrl', ['$scope', function($scope) {
  $scope.something = "hahaha";
}])

/*
 * attributes:
 *   - value - a variable to store the input value in
 *
 */
.directive('inputNumber', ['$log', function( $log ) {

  var linker = function( scope, element, attrs) {
    $log.info('inputNumber linker called! value = "' + scope.value + '".');

    scope.getSet = function( newValue ) {
      if( angular.isDefined( newValue ) ) {
        scope.value = newValue;
      }
      return scope.value;
    }

  }
  return {
           restrict : 'E',
//           template: '<p>Say something! {{ value }}</p><input ng-model="value" ng-model-options="{ getterSetter: false }"></input>',
           template: '<p>Say something! {{ getSet() }}</p><input ng-model="getSet" ng-model-options="{ getterSetter: true }"></input>',
           link: linker,
           scope: {
            value: '='
           }
         };
}])

HTML：

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div ng-app="app" ng-controller="ctrl">
    <input-number value="something" ></input-number>
    </div>
  </body>

</html>

Answer 1

此处的问题是ngModelOptions仅适用于角度1.3，但您使用的是角度1.2.x.尝试修改脚本标记以使用1.3.0-rc.0/angular.min.js，它应该有效。

Answer 2

您的指令模板应设置为模型（在本例中为'value'）。

 template: '<p>Say something! {{ getSet() }}</p><input ng-model="value" 
      ng-model-options="{ getterSetter: true }"></input>'

Demo Plunker

如何在具有隔离范围的角度指令中使用getterSetter？

2 个答案: