将ngInclude放在ngIf或ngSwitch中时,我遇到了一些奇怪的行为.
例如,请执行以下操作:
<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button>
<button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button>
<div ng-if="showIncTemplate">
<p>Included template:</p>
<div ng-include="'template.html'"></div>
</div>
<div ng-if="showInlineTemplate">
<h1>Inline Template</h1>
</div>
(http://plnkr.co/edit/gULbwnKb0gQS8DWz0V6U)
按钮切换选项以呈现后面的div.内联示例的行为与预期一致,内容在单击时显示或消失.
包含子项的div似乎在首次绘制时不包含模板,但随后在每次后续重绘时重复包含该模板.
这里发生了什么？我确实看到围绕ngInclude的一些重大变化,还有其他方式我应该这样做吗？或者这是Angular中的错误？
编辑:
看起来这已经在angularjs github问题跟踪器中了:https: //github.com/angular/angular.js/issues/3627
这个小提琴演示了一些代码,我懒洋洋地添加了一个部分与它自己的控制器.
一切正常,但由于某种原因我的ng-click事件不会开火.知道我做错了什么吗？
javascript angularjs angularjs-ng-include angularjs-ng-click
谁能给我一个如何在ng-include上观察发射事件的例子？确切地说,我想在我的指令中观察$ includeContentLoaded事件......这是我的html:
<div class="page_container">
<div ng-include="menu" class=""></div>
<section>
<about ng-click="loadpantone()">
</about>
<div class="pantone_wrapper">
<div ng-include="template" tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)" ng-class="PrevNext" class="pantoneani remo pantonebg blue" ></div>
</div>
</section>
<section class="right_side"><p>Build a Web doctor</p></section>
</div>
指示:
'use strict';
/*global $:false */
angular.module('bawdApp')
.directive('about', function () {
return {
templateUrl: 'views/pantone-inner.html',
restrict: 'AE',
link: function postLink($scope, element, $emit) {
function border(valueWidth){
$('.page_cont_wrap').css('border', valueWidth+'px solid #aaFFFF');
}
$(element).css({'position': 'absolute'}).delay(200).animate({
'margin-left': '-160px',
'margin-top': '-233px',
'left': '50%',
'top': '50%'
}, 200);
$scope.loadpantone = …我知道ng-view这种类型的问题更好,但我已经用它来动态加载一个authvs. dashboard模板,所以我一直在使用ng-includes.
基本上,一旦我加载dashboard模板ng-view,我有一个选项卡控件,应该更改ng-include取决于哪个选项卡是活动的.但是,我不能为我的生活弄清楚如何根据选择的选项卡更改ng-include.作为一个FYI,Angular的新手,主要是一个JQuery人,(是的,我知道我应该避免使用JQuery w/Angular,以便我可以掌握Angular,但我的智慧结束了这件事).
这是我的标签控件:
myApp.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
url: '#/dashboard/one'
}, {
url: '#/dashboard/two'
}
}];
$scope.activeTab = '#/dashboard/one';
$scope.onClickTab = function(tab) {
$scope.activeTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.activeTab;
}
$scope.dashboard.url = {};
if($scope.activeTab === '#/dashboard/one') {
$('ng-include').attr('src', 'dashboard/one.html');
}
if($scope.activeTab === '#/dashboard/two') {
$('ng-include').attr('src', 'dashboard/two.html');
}
}]);
这是html:
<div id="wrapper" ng-controller="TabsCtrl"> …我有一个索引文件,使用ng-include来引入标头.这是我的索引文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{{page.title}}</title>
<link rel="stylesheet" href="../dist/libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/libs/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../dist/libs/animate.css/animate.min.css">
<link rel="stylesheet" href="../dist/libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../dist/styles/style.min.css">
<script src="../dist/libs/jquery/dist/jquery.min.map"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.min.map"></script>
<script src="../dist/libs/angular/angular.min.js"></script>
<script src="../dist/libs/angular-route/angular-route.min.js"></script>
<script src="../dist/js/controllers.min.js"></script>
<script src="../dist/js/routes.min.js"></script>
<script src="../dist/js/app.min.js"></script>
</head>
<body ng-app="praxis">
<div ng-include="partials/header.html"></div>
<div ng-view></div>
</body>
</html>
我没有收到任何错误,我的控制器正在加载我的ng-view.
这是头文件:
<div id="preloader">
<div id="status"> </div>
</div>
<div id="sb-site">
<div class="boxed">
<header id="header-full-top" class="hidden-xs header-full">
<div class="container">
<div class="header-full-title">
<h1 class="animated …在某些视图中,我想要一个侧边栏和标题,有些我不想.使用AngularJS,实现这一目标的最佳方法是什么.
我当前的解决方案是在侧边栏和标题DIV上使用ng-if,并在我的控制器中,将$ scope变量设置为true或false,具体取决于我希望侧边栏和标题显示的视图.
一个具体的例子是Youtube.com.在Youtube的主页上,请注意有一个侧边栏和一个带有过滤器的子标题:"要注意什么"和"音乐".但是,在任何视频页面上,侧边栏和子标题都不存在.我想在AngularJS中实现这一点.
的index.html
<html ng-app="demoApp">
<body ng-controller="demoAppMainController">
<header>
<ng-include src="'./partials/mainHeader.html'"></ng-include>
<ng-include ng-if="showSubHeader" src="'./partials/mainSubHeader.html'"></ng-include>
</header>
<main>
<ng-view></ng-view>
</main>
</body>
</html>
discussionBoard.html
<div class="discussionBoard" ng-controller="DiscussionBoardController">
<h2>DiscussionBoard</h2>
</div>
controllers.js
var demoAppControllers = angular.module('demoAppControllers', []);
demoAppControllers.controller('demoAppMainController', ['$scope', function($scope) {
$scope.showSubHeader = true;
}]);
opinionLensControllers.controller('DiscussionBoardController', ['$scope', function($scope) {
$scope.showSubHeader = false;
}]);
您好我正在尝试重现下面的代码片段,它在bootstrap中生成一个简单的下拉菜单:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
但是,我希望能够在angularJS的ng-include中包含li标签...
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<ng-include src="'partials/thisView.html'"></ng-include>
</ul>
</li>
然后在thisView中我会:
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
但问题是,当我这样做时,li标签的父标签不是ng-include标签而不是ul标签,这导致格式看起来很差(没有应用任何引导类/ CSS).
所以DOM看起来像这样: …
html javascript twitter-bootstrap angularjs angularjs-ng-include
ng-include期望角度表达式评估为URL,所以当我们编写ng-include ="page.html"时,这意味着$ scope的页面对象的html属性.当我们编写ng-include ="'page.html'"(在page.html周围用双引号括起来的单引号)时,这是一个角度表达式:求值为page.html的字符串
我正在研究一些Bootstrap-UI选项卡,但我无法在templateURL不操纵页面URL的情况下找到在线实例.这是我想做的事情:
HTML
<uib-tabset active="active">
<uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}">
{{tab.content}}
</uib-tab>
</uib-tabset>
JS
model.jo = {...} // a gigantic JSON object - needs to be available in the templates.
model.tabs = [
{
title: "Visualized",
content: url('vis.html')
},
{
title: "Pure JSON",
content: url('json.html')
}
]
我在网上发现的大部分内容都使用$routeProvider和修改$locationProvider网址以显示不同的标签,例如:http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/.我不想那样做.
有没有办法定义templateUrl你为组件做的事情？
另外,我需要我的JSON对象model.jo,在html页面中.
javascript angularjs angular-ui-bootstrap angularjs-ng-include
使用ng-click时遇到麻烦.我在按钮上添加了ng-click指令.它不会触发与ng-click相关的功能.在Angular Batarang工具中,它表示函数未定义.
我在Plunker中尝试了这个问题.它确实有效.而且如果我硬编码文件路径它的工作原理.
index.html代码
<!DOCTYPE html>
<HTML ng-app="myEventApp">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 ng-controller="HelloWorldController">{{ helloMessage }}</h1>
<div ng-controller="EventDetail">
</div>
<div ng-include="" src="fileName"></div>
<!--<ng-include src="fileName"></ng-include>-->
<!--<div ng-include="" src="'template/testing10000.html'"></div>-->
<button ng-click=incrementCounter()>Next</button>
<button ng-click=decrementCounter()>Back</button>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="js/app.js"> </script>
</body>
</HTML>
app.js代码
var app = angular.module("myEventApp", []);
app.controller('HelloWorldController', ['$scope', function($scope){
$scope.helloMessage = "Book Viewer";
}]);
app.controller('EventDetail', ['$scope', function($scope){
$scope.counter = 0;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
$scope.incrementCounter = function(){
$scope.counter++;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
$scope.decrementCounter = function(){
$scope.counter--;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
} …javascript angularjs angularjs-ng-include angularjs-ng-click