Angular directives, only one works per page

Question

I have little problem with my angularJS directive, i want to display 2 photos in different way by using other html codes, but here comes a problem, that only one directive can works per page, the second one works only when i comment the previous one, there are no any errors in the browser console so i totally losing my mind trying to figure how to fix this problem. ps displayed photos are taken form json file.

Angular:

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

any suggestion how to fix it? :)

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

Rename your directive or your Controller name, Sometimes within the same page with two modules with the same controller name could cause the problem. I recommend to change both Controller names to be distinguishable.

For what I have seen I dont know why you need two module within one page . Can you combine it into one module and use two controllers?

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

You can not create same name directives even in the different module. the module is used to divide the develop module,but it can't avoid polluting the namespace.if you want to use the module B in module A,you just need to inject module B like

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

but make sure the directive and controller's name is different