javascript - 指定要在特定页面上使用的指令的 Controller

Question

我的问题是为每页(或需要的地方)指定一个 Controller 是否是“允许的”，这不是一个好主意，或者是否有更好的方法？

示例:将 ng-controller="SocialMentionsAnalysisController" 添加到我的 og-social-mentions-social-media-nav 指令中，以利用该 Controller 的功能。见下文:

<og-social-mentions-social-media-nav ng-controller="SocialMentionsAnalysisController"></og-social-mentions-social-media-nav>

原因是我一直在努力创建一个不会重新加载页面的 anchor 滚动菜单。

当我遇到以下方法时，我尝试了很多不同的可能解决方案:

<强>1。在我的 Controller 中添加此方法:

  $scope.redirectTodiv = function(divname,event) {
     var id = $location.hash();
      $location.hash(divname);
      $anchorScroll();
      $location.hash(id);

   };

<强>2。像这样创建我的菜单链接:

<li><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li>
<li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>

<强>3。当然，还要在我的 Controller 中注入(inject) $location 和 $anchorScroll。

这很好用，但我很难使用我的导航指令来完成这项工作，直到我按照上面的说明在指令中指定了 Controller 。

那么，这样可以吗？

EDIT: My Controller has minimal functionality. Here is my Controller code:

angular.module('portalDashboardApp')
  .directive('ogSocialMentionsSocialMediaNav',['MenuState', function(MenuState) {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: './socialMedia.module/socialMedia.templates/SocialMentionsSocialMediaNavTemplate.html',
      link: function(scope) {
        scope.getClass = MenuState.getClass;
      }
    };
}]);

Answer 1

您可以尝试使用ui-router来解决这个问题。

例如，您有一个指令菜单:

myApp.directive('menu', function() {
    return {
        restrict: 'E',
        template: '<nav class="nav">'+
'  <ul>'+
'    <li><a ui-sref="summary">Summary</a></li>'+
'    <li> <a ui-sref="mentions">Mentions</a></li>'+
'  </ul>'+
'</nav>',
        replace: true,
        link: function(scope, elm, attrs) {
            console.log("Run Menu");                       
        }
    };
});

在根应用程序中添加常规配置:

angular.module("myApp", ["ui.router", "AppCtrls1", "AppCtrls2"]);
    myApp.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('root', {
            abstract: true,
            views: {
                "header@": {},
                "main@": {},
                "footer@": {}
            }
        });
     });

最后在应用程序的 html 中:

<menu></menu> 
<div ui-view="main"></div>

现在您可以创建两个应用程序:

第一个应用程序在同一个应用程序中有一个 subview summary-level-2，您也可以将其他应用程序注入(inject)到 subview 中。

/** APP ONE **/
var subApp1 = angular.module("AppCtrls1", []);

subApp1.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state("summary", {
    parent:'root',
    views:{
       "main@":{
          controller: "Ctrl1",
              template: '<section class="red"><p>Summary</p> <div ui-view></div></section>'
       }
    },
    url: "/summary"
  })
  .state("summary-level-2", {
    parent:'summary',
    controller: "Ctrl2",
    template: '<p class="green">summary-level-2</p>',
    url: "/summary-level-2"
  });
});


subApp1.controller("Ctrl1", function($scope) {
  console.log("Ctrl1 loaded.");
});

subApp1.controller("Ctrl2", function($scope) {
  console.log("Ctrl2 loaded. level 2");
});


/** APP two **/
    var subApp2 = angular.module("AppCtrls2", []);
    subApp2.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state("mentions", {
        parent:'root',
        views:{
           "main@":{
              controller: "Ctrl1",
                  template: "<p>Mentions</p>"
           }
        },
        url: "/mentions"
      });
    });

    subApp2.controller("Ctrl1", function($scope) {
      console.log("Ctrl1 loaded.");
    });

您可以在 Jsfiddle 中看到一个实例。 .