Question

由于来自服务器的响应延迟，我面临从控制器到指令的数据绑定问题。

为了更好地理解，只需在下面看一个小程序。当我删除超时功能时，会发生绑定。

<msg track="{{customer}}"></msg>



angular.module('myApp').directive('msg',  function() {

  return {
      scope: {
        track :"@"
      },
      link : function(scope, element, attrs) {

      },
      template : "<a href>{{track}}</a>"
  }

});

angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {
    setTimeout(function() {
      $scope.customer = "shreyansh";
    }, 5000);
    // assume some service call inside controller 
    // service1.getData().then(function(data){$scope.customer = data})
}]);

如何修复上述问题，以便上面的代码应该呈现为

<msg track="shreyansh" class="ng-isolate-scope"><a href="" class="ng-binding">shreyansh</a></msg>.

感谢任何帮助。

由于

Answer 1

var app = angular.module('plunker', []);

app.factory('myService', function($http) {
  var promise;
  var myService = {
    getData: function() {
      if (!promise) {
        promise = $http.get('test.json').then(function(response) {
          return response.data;
        });
      }
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function(myService, $scope) {
  myService.getData().then(function(d) {
    $scope.data = d;
  });
});

app.directive('msg', function() {
  return {
    restrict: 'E',
    scope: {
      track: "@"
    },
    link: function(scope, element, attrs) {
    },
    template: "<a href>{{track}}</a>"
  }
});



 <msg track="{{data.name}}"></msg>

test.json文件

{
  "name": "Pete"
}

AngularJS指令数据绑定不是从控制器发生的

1 个答案: