我正在构建一个简单的angularjs应用程序,我正在尝试在没有页面刷新的情况下实现登录.
我在做什么
在init上,ng-include加载/ set/save./ set/save得到了<a fblogin>Login with Facebook</a>它.因此,当单击时,指令打开一个窗口,当窗口关闭时,它应该更改ng-include的src.
问题
当在ng-include中使用该指令时(ng-include src在init上有默认值),没有任何反应(控制台中没有错误,只是什么都没有),但是当我把指令放在ng-include之外它工作正常(参见下面的HTML代码)
HTML:
<div id="set-creator" ng-controller="SetCtrl">
........
<div id="saveModal" class="reveal-modal" data-reveal>
<a href fblogin>testCase</a>
// ^this is working
//but if the directive is inside ng-include, it's not working
<ng-include src="saveTemplate"></ng-include>
<a class="close-reveal-modal">×</a>
</div>
</div>
指示:
App.directive('fblogin', function() {
return {
transclude: false,
link: function(scope, element, attrs) {
element.click(function() {
var win = window.open("/auth/facebook", 'popUpWindow', 'centerscreen=true');
var intervalID = setInterval(function() {
if (win.closed) {
scope.saveTemplate = '/set/continue';
scope.$apply();
clearInterval(intervalID);
} …javascript templates angularjs angularjs-directive angularjs-ng-include
我有一个ng-include,它根据动态网址加载内容(按预期工作).
<ng-include class="my-content-area" src="templateUrl"></ng-include>
问题来自于我正在尝试动画内容enter和动画leave(根据角度文档,这些是ng-include为动画设置的两个事件).
.my-content-area.ng-enter,
.my-content-area.ng-leave {
transition: all 500ms;
}
.my-content-area.ng-enter {
opacity:0;
}
.my-content-area.ng-enter.ng-enter-active {
opacity:1;
}
.my-content-area.ng-leave {
opacity:1;
}
.my-content-area.ng-leave.ng-leave-active {
opacity:0;
}
这enter是按预期工作,但leave事实并非如此.我只是看到templateUrl在我的控制器中更改内容时,内容立即消失(不淡出).
有任何想法吗？
javascript css-animations angularjs angularjs-ng-include ng-animate
我正在尝试使用ng-include递归渲染层次树.这是一个小提琴
问题是我的链接函数在渲染完成之前被调用,以尝试初始化空列表上的菜单插件.
link: function (scope, element, attrs) {
var $menus = element.find("ul");
//Prints empty element
console.log($menus.html());
//No real $menus to initialize
//$menus.menuAim({ });
}
我知道有onloadng-include,但是我不想诉诸于一些丑陋的黑客,比如在每个onload上增加一个计数器并与元素的数量进行比较,因为计算计数由于层次结构而变得棘手.
什么是更清楚的方式来了解ng-include何时完成完整的递归渲染并且所有元素都在页面上？
我尝试使用postLink而不是link但指令仍然打印一个空<ul>:
link: {
pre: angular.noop,
post: function(scope, element, attrs){
//no difference
}
}
我在AngularJS中有一个问题需要一些指针.
我有一个视图,我想嵌入一个外部URL(例如http://www.w3schools.com).嵌入的html页面应该像普通的html页面一样响应点击和触摸等事件.
我使用了ng-include指令来实现这一点.
这是一段代码:
<ion-content>
<div ng-include src="'http://www.w3schools.com'"</div>
</ion-content>
如果我加载外部html,我将加载外部网页,但页面内的所有链接都被破坏.如果我单击加载页面中的任何链接,所有链接现在都指向localhost而不是外部URL.
我该如何解决这个问题？
预先感谢!
我对手风琴有问题:
我尝试做的几乎与演示显示的相同,我有一个对象数组.每个对象都包含一个字符串,即标题标题.它还包含一个字符串,它是另一个HTML-File 的相对路径,它应该是accordion-group的内容.
$scope.groups = [{
groupTitle: "Title1",
templateUrl: "sites/file1.html"
}, {
groupTitle: "Title2",
templateUrl: "sites/file2.html"
}];
此代码位于名为的控制器中AccordionController.在我的HTML中,我在控制器中有这个代码
<accordion>
<accordion-group ng-repeat="group in groups" heading="{{group.groupTitle}}">
<div ng-include="group.templateUrl"></div>
</accordion-group>
</accordion>
ng-include和那些东西有效,但是这些组基本上没有对点击做出反应然后打开或关闭,我也尝试添加is-open指令.使用参数我指向一个布尔数组,它改变了特定的值ng-click
烦人的事情 - 我真的不明白 - 这一切都在Plunker中有效
我也联系了
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-0.12.0.js"></script>
并添加bootstrap.ui到我的模块中.
我收到错误消息:TypeError: undefined is not a function在我加载它时在控制台中.
我将不胜感激任何帮助!
angularjs angular-ui angularjs-ng-repeat angular-ui-bootstrap angularjs-ng-include
我试图在第一页视图中获取所有部分内容,以便在应用程序查看期间不下载任何html.
index.html.<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
index.html文件变得难以管理并打破了项目的模块结构..js文件中,最有可能在文件中app.jsmyApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
.js文件不是html代码的地方,而且还有与使用它相同的问题index.html.我想做的是,在不同的文件中有模板,所以我可以保留我的模块结构并在索引上预加载它们.
这就是我现在拥有的.
var cmsAppFirstRun = function ($templateCache, $templateRequest, $rootScope) {
$templateRequest('views/common/top-bar.html').then(function (response) {
$templateCache.put('top.bar', response);
$rootScope.templatesDone = true;
});
};
angular.module('cmsApp').run(cmsAppFirstRun);
和HTML
<div ng-include="'top.bar'" ng-if="$root.templatesDone"></div>
我有一个视图正在加载嵌入式文件后面text/ng-template没有找到ng-include.脚本块位于视图文件的最顶部:
<script type="text/ng-template" id="stringCondition">
<!-- template guts -->
</script>
我将在以后的文件中加载:
<ng-include src="'stringCondition'"></ng-include>
但是在控制台中产生404错误:
GET http://localhost/~me/stringCondition 404 (Not Found)
我已经在命名上尝试了几种变体(比如最后有.html)并使用ng-include作为属性而不是高级元素.一切都没有运气.
什么可能导致嵌入式ng-template无法ng-include在同一个视图文件中注册？
更新:
正如评论和答案所指出的那样,我的代码的基本设计是正确的.但是某些事情导致ng-template(显然)无法使模板可用于系统.
我更新了我的代码以从HTML文件(而不是嵌入的模板)中提取,它工作正常.
是否有一种常见的情况,我可能会遇到这种休息ng-template？
javascript angularjs angularjs-ng-include angularjs-templates angularjs-ng-template
我对ng-include有以下问题.我错过了什么？有人有类似的问题吗？
test.html永远不会包含模板.<h1>Testing</h1> 重复了很多次. Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!我正在做的是一个带有精简版index.html的简单测试
的index.html
<html>
<head>
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet">
<link href="static/src/css/app.css" rel="stylesheet">
<script src="static/bower-components/angular/angular.js"></script>
<script src="static/bower-components/angular-route/angular-route.js"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="static/src/js/app.js"></script>
<script src="static/src/js/services.js"></script>
<script src="static/src/js/controllers.js"></script>
<script src="static/src/js/filters.js"></script>
<script src="static/src/js/directives.js"></script>
</head>
<body ng-app="myApp">
<h1> Testing </h1>
<div ng-include="'test.html'"> </div>
</body>
</html>
的test.html
<h3> included template </h3>
在浏览器中我得到:
检查浏览器中的html,显示index.html的递归包含:
<body ng-app="myApp" class="ng-scope">
<h1> Testing </h1>
<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" …我已经做了一些研究,我似乎无法找到最好的模式来ng-repeat递归使用来创建一个深度table.用户mgdelmonte在这里有一些值得注意的关于这个主题的提及,但是唉,没有解决方案.
HTML和模板:
<body ng-app="myApp">
<div ng-controller="myAppController">
<script type="text/ng-template" id="tree_item.html">
<tr style="width:100%">
<td>{{data.name}}</td>
</tr>
<div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">
</div>
</script>
<table class="table table-striped">
<thead>
<tr>
<th style="width:30px;">Test</th>
</tr>
</thead>
<tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">
</tbody>
</table>
</div>
</body>
JS:
angular.module('myApp', []);
function myAppController($scope) {
$scope.treeData = [{
"name": "Root",
"nodes": [{
"name": "Level 1",
"nodes": [{
"name": "Level 2"
}]
}]
}];
}
这是我的jsfiddle:http://jsfiddle.net/8f3rL/86/
这是我得到的绝对最远的.它可以很好地遍历树,但是<tr>当它递归时,我正在丢失标签.而是它的渲染<span>.
我的直觉告诉我,当它ng-repeat …
这是我的HTML的一部分,我试图包含另一个HTML文件"content.html",但它无法正常工作.源中的那些地址是正确的,但我仍然无法实现.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-include src="'content.html'"></div>
</body>
</html>
这是我的content.html
<div class="container">
<h1>Heading!</h1>
</div>