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

标签 javascript angularjs

我仍在学习 AngularJS,并且我正在尝试(例如)定期切换名称。我已经掌握了大部分基本想法,但我遇到了 Angular 如何处理信息共享的问题我已经尝试过:

http://jsfiddle.net/nwz5krw4/1/ fiddle 的核心是这样的(其中名称是名称数组):

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 思考”,需要一些心理翻译才能实现这一飞跃。

最佳答案

您不需要将 $scopenames 传递给 this.changeName 方法。

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

或者,您可以将其绑定(bind)到回调,并且不需要存储引用。

请在下面和此处找到工作演示 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>

关于javascript - 访问 AngularJS 函数中的作用域变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28594987/

相关文章:

javascript - 使用 AJAX 的数据表中的子行

javascript - Knockoutjs 中的数字输入和范围 valueUpdate

javascript - 如何使用 jQuery 检查我是否正在离开另一个网站?

php - Angular 显示 php MySQL 结果

angularjs - 显示无效输入的错误消息

angularjs - 如何在单击时将类添加到 AngularJS 中的父元素?

javascript - 在javascript中动态调用本地函数

javascript - 如何隐藏或加密 JavaScript 代码?

php - JWT 授权 laravel/angularjs 问题

javascript - 为什么 AngularJS 表达式在 HTML 模板中只被替换一次?