访问AngularJS中函数中的作用域变量

Accessing scope variable in function in AngularJS

本文关键字：作用域 变量 函数 AngularJS 访问      更新时间：2024-01-20

我仍在学习AngularJS，我正在尝试（例如）定期切换名称。我已经记下了大部分基本想法，但我在Angular如何处理信息共享方面遇到了问题。我尝试过这个：

http://jsfiddle.net/nwz5krw4/1/fiddle的核心是这个（其中name是一个名称数组）：

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。我根据"如何在Angular中使用$rootScope来存储变量"采取的另一条路径？就是创建这个：

app.run(function($rootScope){
});

并将我的名称数组作为$rootScope.names放在那里。显然，在可能的情况下应该避免使用$rootScope，但现在我只想获得功能。然而，这也没有奏效。将$scope传递给方法导致未定义$scope.names或$rootScope.names。我还没有"用角度思考"，需要一些心理翻译才能实现飞跃。

您不需要将$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>

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

var hi = this;

这将避免任何奇怪的内部冲突，并且您不必使用rootScope或$parent或任何其他无稽之谈。

所以我把它改为使用它，效果很好。我也转到了plunker，因为JSFiddle很糟糕，给了我一堆奇怪的角度误差。不管怎样，这是一个工作小提琴

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

你会看到，我所做的只是更改了所有的$范围$parent使用分配给"this"的新变量。

相关文章：