Question

我的angularJS指令没有什么问题，我希望通过其他html代码以不同的方式显示2张照片，但是这里出现了一个问题，每页只有一个指令可以工作，第二个指令只在我发表评论时有效在前一个，浏览器控制台中没有任何错误，所以我完全不知道如何解决这个问题。 ps显示的照片是从json文件中获取的。

角：

(function(angular) {
    'use strict';
    angular.module('SinglePost', ['ngSanitize', 'ui.bootstrap'])
        .controller('Controller', ['$scope', '$http', '$sce', '$location', function($scope, $http, $sce, $location) {
            var weburl = document.URL;
            var postId = weburl.substr(-2, 2)
            $http.get(link + 'json=get_post&post_id=' + postId).then(function(response, date, content) {
                $scope.content = response.data.post;
                $scope.CategoryID = response.data.post.categories[0].id;
                IDcategory = $scope.CategoryID
                console.log(IDcategory)
                $sce.trustAsHtml(content);
            });
        }])
        .directive('myPost', function() {
            return {
                restrict: 'AEC',
                scope: {
                    myPost: '='
                },
                templateUrl: '../common/directive/single-post.html'
            };
        });
})(window.angular);

(function(angular) {
    'use strict';
    angular.module('SinglePostsCategory', ['ngSanitize', 'ui.bootstrap'])
        .controller('Controller', ['$scope', '$http', '$sce', '$location', function($scope, $http, $sce, $location) {
            $http.get(link + 'json=get_category_posts&id=1').then(function(response, date, contents) {

                $scope.myList = {
                    items: [
                        $scope.content = response.data.posts[0],
                        $scope.content = response.data.posts[0]
                    ]
                }
            });
        }])
        .directive('myPost', function() {
            return {
                restrict: 'A',
                scope: {
                    myPost: '='
                },
                templateUrl: '../common/directive/single-subpost_category.html'
            };
        });
})(window.angular);

HTML：

<div class="col-md-12">
    <div ng-app="SinglePost">
        <div ng-controller="Controller">
            <div my-post="content">
                <h1>CONTENT</h1></div>
        </div>
    </div>
    <div class="row">
        <div ng-app="SinglePostsCategory">
            <div ng-controller="Controller">
                <div ng-repeat="content in myList.items">
                    <div my-post="content">
                        <h1>CONTENT</h1></div>
                </div>
            </div>
        </div>
    </div>
</div>

任何建议如何解决？：）

Answer 1

function(angular) {
'use strict';
angular.module('SinglePost', ['ngSanitize', 'ui.bootstrap'])
    .controller('SingleController', ['$scope', '$http', '$sce', '$location', function($scope, $http, $sce, $location) {
        var weburl = document.URL;
        var postId = weburl.substr(-2, 2)
        $http.get(link + 'json=get_post&post_id=' + postId).then(function(response, date, content) {
            $scope.content = response.data.post;
            $scope.CategoryID = response.data.post.categories[0].id;
            IDcategory = $scope.CategoryID
            console.log(IDcategory)
            $sce.trustAsHtml(content);
        });
    }])
    .directive('mySinglePost', function() {
        return {
            restrict: 'AEC',
            scope: {
                myPost: '='
            },
            templateUrl: '../common/directive/single-post.html'
        };
    });})(window.angular);
   angular.module('SinglePostsCategory', ['ngSanitize','ui.bootstrap'])
    .controller('SinglePostsController', ['$scope', '$http', '$sce', '$location', function($scope, $http, $sce, $location) {
        $http.get(link + 'json=get_category_posts&id=1').then(function(response, date, contents) {

            $scope.myList = {
                items: [
                    $scope.content = response.data.posts[0],
                    $scope.content = response.data.posts[0]
                ]
            }
        });
    }])
    .directive('mySinglePostsCategory', function() {
        return {
            restrict: 'AEC',
            scope: {
                myPost: '='
            }, 
          templateUrl:'../common/directive/singlesubpost_category.html'                       
        };
    });})(window.angular);

重命名您的指令或控制器名称。有时在同一页面中，两个具有相同控制器名称的模块可能会导致问题。我建议将两个控制器名称更改为可区分。

对于我所看到的，我不知道为什么你需要在一个页面内有两个模块。你能把它组合成一个模块并使用两个控制器吗？

HTML：

<div class="col-md-12">
<div ng-app="SinglePost">
    <div ng-controller="SinglePostController">
        <div my-single-post="content">
            <h1>CONTENT</h1></div>
    </div>
</div>
<div class="row">
    <div ng-app="SinglePostsCategory">
        <div ng-controller="SinglePostsController">
            <div ng-repeat="content in myList.items">
                <div my-single-posts-category="content">
                    <h1>CONTENT</h1></div>
            </div>
        </div>
    </div>
</div>

Answer 2

即使在不同的模块中，也无法创建相同的名称指令。该模块用于划分开发模块，但它不能避免污染命名空间。如果你想在模块A中使用模块B，你只需要注入模块B，如

angular.module('SinglePost', ['ngSanitize', 'ui.bootstrap','SinglePostsCategory'])

但要确保指令和控制器的名称不同

Angular指令，每页只有一个工作

2 个答案: