Question

我还在学习AngularJS，我正试图（例如）定期更换名称。我已经掌握了大部分的基本想法但是我遇到了Angular如何处理信息共享方式的问题我试过这个：

http://jsfiddle.net/nwz5krw4/1/ 小提琴的核心是这个（名字是一个名字数组）：

this.changeName = function($scope,names)
    {
        this.nameIndex++;
        if ($scope.$parent.nameIndex > (names.size - 1))
        {
            $scope.$parent.nameIndex = names[0];
        }
        else
        {
            $scope.$parent.myName = names[$scope.$parent.nameIndex];
        }

    };

奇怪的是，那将在浏览器中加载并给我第一个名字，然后简单地拒绝改变阅读控制台显示t。我基于How do I use $rootScope in Angular to store variables?采取的另一条路径是创建它：

app.run(function($rootScope){

});

并将我的数组名称放在$ rootScope.names中。显然，在可能的情况下应该避免使用$ rootScope，但是现在我只是想要功能。但是，这也没有用。将$ scope传递给该方法会导致$ scope.names或$ rootScope.names未定义。我还没有“在Angular中思考”，需要一些心理翻译才能实现飞跃。

Answer 1

您无需将$scope和names传递给this.changeName方法。

只需创建对此的引用即可将其命名为vm，self或that，然后您可以在方法内使用对象变量。这是必需的，因为这在$ interval回调中是不同的。

或者你可以将它绑定到回调，你不需要存储引用。

请在JSfiddle找到下面的工作演示。

(function () {
    var app = angular.module('hello-world', []);

    app.controller('helloController', function ($scope, $interval) {
        // Create an array of names.
        var names = [
            "Jed",
            "Leo",
            "Josh",
            "Toby",
            "Sam",
            "CJ",
            "Donna",
            "Charlie",
            "Delores",
            "Abby",
            "Will"];

        // Set initial values for on-page elements
        var vm = this; // reference to view-model
        this.myName = names[0];
        this.nameIndex = 0;
        
        /**
         * Changes the name when called.
         */
        this.changeName = function () {
            vm.nameIndex = vm.nameIndex++ >= names.length - 1 ? 0: vm.nameIndex; 
            vm.myName = names[vm.nameIndex];
            console.log(vm.myName, vm.nameIndex);
        };

        $interval(this.changeName, 2000);
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="hello-world">
    <div ng-controller="helloController as hi">
        
<h1 style="text-align: center" ng-style="{'color':hi.myColor}">Hello, {{hi.myName}}</h1>

    </div>
</body>

Answer 2

好吧，首先。在控制器中执行controllerAs语法时，一个非常好的提示，将其分配给变量。

var hi = this;

这将避免任何奇怪的内部冲突，你不必乱用rootScope或$ parent或任何废话。

所以我把它切换到使用它，它工作正常。我也转移到了plunker，因为JSFiddle非常蹩脚，给了我一堆奇怪的角度错误。无论如何，这是一个工作小提琴

http://plnkr.co/edit/53Md9eAZmq0gRRs1hfkp?p=preview

你会看到，我所做的就是更改所有$ scope。$ parent以使用分配了'this'的新变量。

在AngularJS中访问函数中的范围变量

2 个答案: