指令無法從服務檢索數據

Question

我有一點SPA使用角度。這個概念很簡單，登錄後，$ routeProvider重定向到我有一個homeController指定的主頁。 這是從由NG-視圖，而導航至「/家」渲染我家的觀點：

<my-directive datas=getData()></my-directive> 
<ul> 
<li ng-repeat="data in datas"> {{data.title}} {{data.content}} </li> 
</ul> 

我的指令被寫爲：

angular.module('app').directive('myDirective', ['myService', function (myService) { 
    return { 
     restrict: "E", 
     scope: { 
      data: '=' 
     }, 
     templateUrl: "partials/my-directive.html", 
     controller: function ($scope) { 
      $scope.getDatas = function() 
      { 
       myService.retData(); 
      } 
     } 
    }; 
}]); 

家庭控制器是：

angular.module('app').controller('homeController', homeController); 

homeController.$inject = ['myService', '$scope']; 
function homeController(myService, $scope) { 
    var vm = this; 
    vm.data = []; 

    initController(); 

    function initController() { 
     vm.data = myService.retData(); 
    } 

} 

，最後我的服務就是

angular.module('app').service('myService', myService); 

    function myService() { 
     var data = [ 
         { id: 1, title: 'Albert Einstein', content: 'Random Content' } 
        ]; 
     return { 
      retData: function() { 
       return data; 
      }, 
      addData: function (title, content) { 
       var currentIndex = data.length + 1; 
       data.push({ 
        id: currentIndex, 
        title: title, 
        content: content 
       }); 
      } 
     }; 
    } 

現在我提到了一切，問題來了。該指令無法從服務中檢索數據。實際上，當我在VS2013中運行項目時，myDirective.js甚至沒有加載。我在主HTML頁面中包含了所有服務，指令，控制器等。 是什麼導致了這個問題？ 它與指令中隔離的範圍有關嗎？ 在控制器，指令和服務之間共享數據的更好方法是什麼？ 我可能在重寫所有代碼時犯了一些愚蠢的錯誤。請指出它們，但請記住我的實際問題以及可能導致此錯誤的原因。

Answer 1

更好地使用isolated範圍將數據控制器傳遞給指令。

HTML：

<my-directive datas="getData()" data="data"></my-directive> 

指令：

angular.module('app').directive('myDirective', [function() { 
    return { 
     restrict: "E", 
     scope: { 
      data: '=' 
     }, 
     templateUrl: "partials/my-directive.html", 
     link: function (scope) { 
      //Here you got the isolated scope data 
      var details = scope.data; 
     } 
    }; 
}]); 

OR

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'partials/my-directive.html', 
     scope: { 
      date: '=', 
     }, 
     controller : ['$scope', 'myService', function($scope, myService) { 
      myService.retData(); 
     }], 
     link: function(scope, elem, attr) { 
      // 
     } 
    }; 
});