Question

我有一个使用角度的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) { // } }; });

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

1 个答案: