我在了解角度组件范围时遇到麻烦。如果我做类似的事情:
function myComponent(){ this.data = 'Hello World'; } let myModule = angular.module('myModule', []); myModule.component('myComponent', { template: `<div>{{$ctrl.data}}</div>`, controller: myComponent }); <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <div ng-app="myModule"> <my-component></my-component> </div>
它可以正常打印…现在,如果我做一些小的修改并使其异步:
function myComponent(){ Promise.resolve().then(_ => { this.data = 'Hello World'; }); } let myModule = angular.module('myModule', []); myModule.component('myComponent', { template: `<div>{{$ctrl.data}}</div>`, controller: myComponent }); <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <div ng-app="myModule"> <my-component></my-component> </div>
它不会打印任何内容。我可以使用点击处理程序thouogh来更改值,但是对于http和其他异步操作而言,它将无法正常工作。
运行异步代码时,需要让Angular知道某些内容已更新。这使得angular运行$ digest循环,检查是否需要更新任何绑定。
为此,请将您的作业包装到的调用中$scope.$apply()。
$scope.$apply()
function myComponent($scope){ Promise.resolve().then(_ => { $scope.$apply(() => { this.data = 'Hello World'; }); }); } let myModule = angular.module('myModule', []); myModule.component('myComponent', { template: `<div>{{$ctrl.data}}</div>`, controller: myComponent }); <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <div ng-app="myModule"> <my-component></my-component> </div>
注意,我$scope不仅在函数主体中添加了函数,而且还添加了函数参数。
$scope
阅读更多有关$scope.$apply和$scope.digest
$scope.$apply
$scope.digest