Question

我在角度1.4中定义一个指令，它接收范围参数“b”：

(function() {
    'use strict';
    angular
        .module('m')
        .directive('mydirective', mydirective);

    /** @ngInject */
    function mydirective() {
        var directive = {
            restrict: 'E',
            templateUrl: 'app/components/mydirective/mydirective.html',
            scope: {
                b: '='
            },
            controller: MydirectiveController,
            controllerAs: 'vm',
            bindToController: true
        };
        return directive;

    /** @ngInject */
    function MydirectiveController($scope, $state) {
        var vm = this;
        //here How to watch the parameter b to refresh the directive html result？
    }

在html页面中：

<mydirective b="ctrl.b"></myupl>

在业务控制器中，b来自角度资源

PayService.getBusinessNumber().then(function(results){
    vm.b = {business_id: results.no};
});

在index.route.js中定义路由和业务控制器，

$stateProvider
    .state('payShowInfo', {
        url: '/payShowInfo',
        templateUrl: 'app/pay_show_info.html',
        controller: 'PayShowController',
        controllerAs: 'ctrl'
    });

我的问题是，当指令加载时，参数“b”未定义，如何在angular指令中观察控制器异步数据？然后使用新值“b”刷新html页面？

Answer 1

如果将指令参数定义为“=”，则表示您将具有双向数据绑定。因此，如果更改控制器中的值，您将在视图中反映出更改。

angular.module('nib', [])
    .directive('mydirective', function ($timeout) {
        return {
            restrict: 'E',
            scope: {
                b: '='
            },
            link: function ($scope, element, attrs) {

            },
            template: '<div>Test: {{b}}</div>'
        };
    })
    .controller('ctrl',function($scope){

      $scope.click = function(){ // emulating asynchronous request
        $scope.test = 'testing';
      }

    })

请参阅下面的plnkr：

http://plnkr.co/3qs1NpU1aIhKzxyCMXjh?p=preview

如何在angular指令中观察控制器异步数据

1 个答案: