我仍在学习 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 思考”,需要一些心理翻译才能实现这一飞跃。
最佳答案
您不需要将 $scope
和 names
传递给 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/