AngularJS指令數據綁定未從控制器發生

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"
}