指令无法从服务中检索数据

Question

我有一个使用 Angular 的小 SPA。这个概念很简单，登录后，$routeProvider 会重定向到我指定了 homeController 的主页。 这是在导航到“/home”时由 ng-view 呈现的我的主视图：

<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;
        }
    };
}]);

或

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) {
            //
        } 
    };
});