1. 홈
  2. 질의 응답
  3. angularjs가있는 부트 스트랩 navbar

angularjs가있는 부트 스트랩 navbar

2013-07-28 5 views

답변

10

는 코드의 문제의 몇 가지가 있습니다. 제 수정 사항을 사용중인 버전과 비교하십시오. (Plnkr)

  1. 라우팅 규칙을 등록하려면 config()를 사용해야합니다.
  2. HTML 페이지에 ng-view을 넣고 범위 내에 있는지 확인하십시오. NavCtrl
  3. 라우팅 규칙의 컨트롤러 이름은 문자열이어야합니다. 따옴표를 놓 쳤어.
  4. href가 아닌 페이지를로드하려면 ng-click을 사용해야합니다. 라우팅은 Angularjs의 범위 (html이 아닌)입니다.

출처

2013-07-28 18:09:34 zsong

+1

+1 통찰력있는 "명심하십시오. 라우팅은 Angularjs의 범위가 html이 아닙니다." –

+0

편도 있습니까? $ routeProvider로 어떻게 할 수 있습니까? – oshliaer

6

순수 부트 스트랩에서 AngularJS 호환 부트 스트랩으로 전환하는 것이 좋습니다.

예를 들어 - http://mgcrea.github.io/angular-strap/#/navbar

출처

2013-07-28 19:08:16

+2

동의 장기 실행 이것은 사용하기에 좋은 것 같습니다. 나는 여전히 각도를 배우기 때문에 스스로 골라서 일을하고 있으므로 프레임 워크가 중요하다는 것을 이해합니다. – lostintranslation

+0

그런 경우에는 부트 스트랩을 사용하지 마십시오. 부트 스트랩과 앵귤러는 일반 버전을 사용하면 항상 멋지게 재생되지 않으며 대부분의 부트 스트랩이 할 수있는 일은 Angular로 이미 수행 할 수 있습니다. 그건 물론 각도로 Bootrap을 사용해서는 안된다는 말은 아니지만 배울 점이 있다면 Bootstrap을 소개하기 전에 Angular 방식으로 일을 배워야합니다. –

+0

좋은 지적. 내 솔루션을 찾을 때이 문제를 보았지만 [angular-ui-router] (https://github.com/angular-ui/ui-router)를 사용하려고했습니다. FWIW, 앵글 라우터를 사용하는 기본 지시문을 만들었지 만 부트 스트랩 탐색 바를 제어 할 수있는 지시문을 만들지는 않았습니다. [cr-bootstrap-navbar] (https://github.com/coderigo/cr-bootstrap-navbar)) – coderigo

1

난 후 조금 오래 알고 있지만, 그것은 부트 스트랩, AngularJS와 구현 드롭 다운 메뉴의 부부와 네비게이션 바있다 navbar menu

다른 사람에게 도움이 될 수있다 CSS 및 앵귤러 - ui. 드롭 다운 메뉴는 사용자 지정 지시문에서 재귀 호출에 의해 생성됩니다.

index.html을 :

<body> 
    <h1>Hello Navbar</h1> 
    <div ng-app="my-app"> 
    <div ng-controller="treeController"> 
     <nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
      <span>Brand</span> 
      </a> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
      <a href="#" class="dropdown-toggle" dropdown-toggle role="button"> 
       Dropdown 
       <span class='caret'></span> 
      </a> 
      <tree tree='tree'></tree> 
      </li> 
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
      <a href="#" class="dropdown-toggle" dropdown-toggle role="button"> 
       Just a clone 
       <span class='caret'></span> 
      </a> 
      <tree tree='tree'></tree> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </div> 
</body>

script.js :

var app = angular.module('my-app', ['ui.bootstrap']); 

app.controller('treeController', function($scope) { 
    $scope.callMe = function() { 
    alert("test"); 
    }; 

    $scope.tree = [{ 
    name: "Bob", 
    link: "#", 
    subtree: [{ 
     name: "Ann", 
     link: "#" 
    }] 
    }, { 
    name: "Jon", 
    link: "#", 
    subtree: [{ 
     name: "Mary", 
     link: "#" 
    }] 
    }, { 
    name: "divider", 
    link: "#" 
    }, { 
    name: "Another person", 
    link: "#" 
    }, { 
    name: "divider", 
    link: "#" 
    },{ 
    name: "Again another person", 
    link: "#" 
    }]; 

}); 

app.directive('tree', function() { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: { 
     tree: '=' 
    }, 
    templateUrl: 'template-ul.html' 
    }; 
}); 

app.directive('leaf', function($compile) { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: { 
     leaf: "=" 
    }, 
    templateUrl: 'template-li.html', 
    link: function(scope, element, attrs) { 
     if (angular.isArray(scope.leaf.subtree)) { 
     element.append("<tree tree='leaf.subtree'></tree>"); 
     element.addClass('dropdown-submenu'); 
     $compile(element.contents())(scope); 
     } else { 
     element.bind('click', function() { 
      alert("You have clicked on " + scope.leaf.name); 
     }); 

     } 
    } 
    }; 
});

그리고 마지막으로 두 개의 템플릿 :

<ul class='dropdown-menu'> 
    <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf> 
</ul> 

<li ng-class="{divider: leaf.name == 'divider'}"> 
    <a ng-if="leaf.name != 'divider'">{{leaf.name}}</a> 
</li>

도움이되기를 바랍니다.

출처

2015-03-03 21:16:48

관련 문제

 관련 문제