Угловые директивы, только один работает на страницу

Question

У меня есть небольшая проблема с моей директивой angularJS, я хочу отображать 2 фотографии по-другому, используя другие html-коды, но здесь возникает проблема, что только одна директива может работать на странице, второй работает только тогда, когда я комментирую предыдущий, никаких ошибок в консоли браузера нет, поэтому я полностью теряю рассудок, пытаясь понять, как исправить эту проблему. 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

Вы не можете создавать те же указания имен даже в другом модуле. модуль используется для отделения разработки модуля, но он не может избежать загрязнений namespace.if вы хотите использовать модуль B в модуле A, вам просто нужно вводить модуль B, как

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

но сделать убедитесь, что директива и имя контроллера различны.