Question

我正在阅读一篇有趣的文章AngularJS: Tricks with angular.extend()，并解释了如何将getters和setters与extend一起使用。但有些观点我不明白。

JS：

app.controller('ThingController', [ '$scope', function($scope) {

    // private
    var _thingOne = 'one',
        _thingTwo = 'two';

    // models
    angular.extend($scope, {
        get thingOne() {
            console.log("get thing1");
            return _thingOne + 'eeeeee';
        },
        set thingOne(value) {
            console.log("set thing 1");
            if (value !== 'one' && value !== 'two'){
                throw new Error('Invalid value ('+value+') for thingOne');
           }
        },
        get thingTwo() {
            console.log("get thing2");
            return _thingTwo + 'oooooo';
        },
        set thingTwo(value) {
            console.log("set thing 2");
            if (value !== 'two' && value !== 'three'){
                throw new Error('Invalid value ('+value+') for thingTwo');
           }
        }
   });

    // methods
    angular.extend($scope, {
       get things() {
            return _thingOne + ' ' + _thingTwo;
        }
    });

}]);

HTML

<body ng-controller="ThingController">
    {{ things }} // one, two 
</body>

我的问题：

¿为什么get thingOne()未归还oneeeeeee？（get thingTwo()）
¿在哪里称为set thingOne和set thingTwo？因为我从未在控制台set thing 1或set thing 2上看到。
¿如何在set method内声明angular.extend methods？ ¿可以从视图中确定一个值吗？

Answer 1

尝试这种方式：

angular.extend($scope, {
    get things() {
        return $scope.thingOne + ' ' + $scope.thingTwo;
    }
});

在这种情况下将调用Setter：

$scope.thingOne = 'test';

Answer 2

它与angular.extend无关 - 这些是属性访问器：getter和setter ...允许你在对象字段的读/写中添加一些逻辑。

以下是您如何定义一个：

var instance = {
   get prop() { return this._prop },
   set prop(value) { this._prop = value }
}

像这样使用它：

instance.prop = "new value"
var x = instance.prop

angular.extend仅将此定义复制到$ scope。您也可以使用Object.define ..如下所示： http://jsfiddle.net/v1bxyrx1/2/

angular.extend $ scope上的getter和setter

2 个答案: