Question

在构建功能的同时，我一直在创建一些小指令并使用硬编码数组进行测试。现在我已经做了一些，我回去创建了一个服务，通过JSON从网站加载数据;它返回一个承诺，当它成功时，我更新我的模板所基于的属性。当然，只要我这样做，我的指令就会停止正确渲染。

将我的指令绑定到异步加载数据的首选方法是什么，以便在数据最终返回时我的指令呈现？

我正在使用Angular 1.4.7。

以下是我的硬编码版本的简单示例。

angular
    .module('app', []);

angular.module('app').controller('test', function(){
    var vm = this;
    
    vm.inv = 'B';
    vm.displayInv = function () {        
        alert('inv:' + vm.inv);
    };
});

angular.module('app')
       .directive('inventorytest', function () {
    return {
        restrict: 'E',
        template: '<select ng-model="ctrl.selectedOption" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{ctrl.selectedOption}}',

        scope: { selectedOption: '='},
        bindToController: true,
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="test as vm">
    <inventorytest selected-option='vm.inv'></inventorytest>
    
    <br/>
    Controller: {{vm.inv}}
</div>

我的服务基本上只是$ http调用的瘦包装，例如：

return $http({ method: 'GET', url: 'https://myurl.com/getinfo' });

我曾尝试修改我的代码以执行以下操作：

 this.invTypes = [ { code: '', desc: '' }];
 ctrService.getInfo()
          .then(function successCallback(response) {
                this.invTypes = response.data;
          }, function errorCallback(response) {
           // display error
 });

就像我说的，这不起作用，因为看起来Angular并没有看到这个属性。

Answer 1

在回调中this有不同的背景，而不是你想要的。

您需要保存对控制器this的引用，并在任何回调中使用

// store reference to `this`
var vm = this;
vm.invTypes = [ { code: '', desc: '' }];
 ctrService.getInfo()
          .then(function successCallback(response) {
                // must use reference to maintain context 
                vm.invTypes = response.data;
          }, function errorCallback(response) {
           // display error
 });

在异步加载数据时，如何获得Angular指令自动刷新？

1 个答案: