Javascript 角度指令，每页只有一个有效

我的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:

内容
内容

有什么建议可以解决吗？：）

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

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

HTML:

内容
内容

---

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

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

---

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

如果您将其与控制器一起注入，Angular会认为该指令是控制器的一部分。我按照您所说的做了，但它没有解决我的问题。我想我得再读一遍。

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

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

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