我是angularjs的新手,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中.
我有2个视图管理angular-route,两个html视图都包含一个仅包含charts-element的html页面.
问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载但图表不会重新绘制.现在,如果我回到第一眼看到它的空白.
链接到Plunker
我做错了什么?我的指令有问题吗?
提前致谢.
charts angularjs angularjs-directive angularjs-ng-include chart.js
我有一个角度应用程序,它具有各种依赖项,如模块和样式.
另一方面,我有多个网站,我想在这个应用程序中包含所有依赖项(就像你在iFrame中一样).我希望将应用程序包含在div中(就好像它是iframe)但我必须是div,而不是iFrame,因此其他网站可以为内联应用程序选择自己的样式.
这样,当我将它添加到我的CORS时,我可以让每个站点都包含该应用程序.喜欢:
<div ng-include="app_from_other_domain"></div>
Run Code Online (Sandbox Code Playgroud)
随着该div内的所有路由.
在阅读了大量文档后,我不知道从哪里开始.任何帮助,将不胜感激!
javascript iframe angularjs angularjs-directive angularjs-ng-include
我正在使用该ngInclude指令来加载HTML片段.现在我正在寻找传递动态URL的最佳方法.我知道我可以使用字符串连接创建URL:
<ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"></ng-include>
Run Code Online (Sandbox Code Playgroud)
在我眼里,这有点难看.
ngHref并且ngSrc例如,接受包含URL {{}}标记.恕我直言,这种语法更清晰:
<img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/>
<a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/>
Run Code Online (Sandbox Code Playgroud)
有没有更好的方法将动态URL传递给ngInclude?
ng-include到目前为止,我试图阅读文档,但没有运气.我想要做的就是ng-include评估模板/部分所在的路径并加载内容:
<div data-ng-include src="'{{pageData.src}}'"></div>
Run Code Online (Sandbox Code Playgroud)
我可以看到在控制台中pageData.src返回"tpl/page.html".我尝试了以下变化:
<div data-ng-include src="{{pageData.src}}"></div>
<div data-ng-include src='{{pageData.src}}'></div>
<div data-ng-include src={{pageData.src}}></div>
Run Code Online (Sandbox Code Playgroud)
他们似乎都没有评估表达方式.我收到以下错误:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D
Run Code Online (Sandbox Code Playgroud)
反馈非常感谢!
我目前正在处理一些带有延迟加载内容+控制器的代码.我的代码基本上就像这个小提琴一样.但是,出于某种原因,我的版本不起作用,而只要角度尝试更新它的视图,我就会获得无限的摘要周期.
当我ng-include从这个简单的重复声明中删除时,问题就消失了:
<div class="container" ng-repeat="pageName in pageNames">
<div ng-include="pageName"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
最奇怪的部分:exact same error即使pageNames从未分配给范围,也会发生.两个范围(外部和内部控制器的范围 - 我每个都有)可以完全为空(我用Batarang检查 - 我只有两个空的范围),我仍然得到错误.
我的代码有点太复杂,有太多其他依赖项,所以在这里发布是没有意义的.它最纯粹的版本是上面的小提琴.我无法找到两者之间的逻辑差异.当我用Batarang检查我的望远镜时,我也没有看到任何可疑的东西:
$watchng-model我的结论是,我没有明确地改变任何东西,所以它必须是有角度的东西.
我可以以某种方式让Angular或Batarang告诉我在摘要迭代后哪些范围变量已经改变,所以我可以识别导致无限循环的罪魁祸首?
更新:
我终于想通了,history.pushState搞砸了一切.我现在正在研究替代方案,例如$location服务.不过,我仍然想知道如何调试这类问题.任何提示?
javascript angularjs angularjs-ng-repeat angularjs-ng-include
我想在每次ng-include指令请求部分时更改URL .到目前为止,我能够看到这样的网址和事件:
app.run(function ($rootScope) {
$rootScope.$on('$includeContentRequested', function (event, url) {
console.log(event);
console.log(url);
});
});
Run Code Online (Sandbox Code Playgroud)
现在我需要能够将URL更改'templates/incs/includedPartial.html'为'templates/incs/includedPartial.html?cache_version=1_1',然后使用新链接包含部分.
显然我这样做是为了防止版本更改时出现缓存问题.这是一个好策略还是有更好的解决方案?在此先感谢任何帮助......
在键盘事件上,我想动态更改ng-include指令的src值.
我正在尝试使用HMTL加载一个放在单独的html中的组件.问题是,只要在浏览器中加载页面就会调用它.
以下是我的模态代码:
<div class="modal fade borderColorC0C0C0 borderRadiusOverride" id="termsAndConditionsPopover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" ng-include="'components/popover/termsAndConditions/termsAndConditions.html'">
</div>
Run Code Online (Sandbox Code Playgroud)
组件代码在这里:
termsAndConditions.html
<div class="modal-dialog borderRadiusOverride">
<div class="modal-content borderRadiusOverride">
<div class="termsAndConditionsHeaderColor borderRadiusOverride divHeight50 paddingTop15 paddingLeft15 paddingBottom15 borderBottomColorC0C0C0">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>-->
<h5 class="modal-title marginBottom15 fontColorTileSteps" id="myModalLabel">Cisco's GSA shipping Policy</h5>
</div>
<div class="modal-body borderRadiusOverride fontColorTileSteps">
This policy outlines the requirements of shipping Internationally including but not limited to:
<ul>
<li>All members of the Cisco workforce are responsible to adhere to this policy</li>
<li>AST is …Run Code Online (Sandbox Code Playgroud) javascript jquery document-ready angularjs angularjs-ng-include
我是angularjs的初学者,目前我正面临着ng-include的问题.
我有一个使用partials的测试应用程序.这是我的代码.
<html ng-app ="TextboxExample">
<head>
<title>Settings</title>
<script src="angular.js"></script>
</head>
<body ng-controller="ExampleController">
<div ng-include src = "'view.html'"></div>
<script>
angular.module('TextboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.textboxVal = 'fddfd';
$scope.ReadGeneralSettings = function() {
alert($scope.textboxVal);
}
$scope.ResetGeneralSettings = function() {
$scope.textboxVal = 'fddfd';
}
}]);
</script>
<button class="pull-right" ng-click = "ReadGeneralSettings()">Read</button>
<button class="pull-right" ng-click = "ResetGeneralSettings()">Cancel</button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
部分代码view.html是
<input type="text" ng-model="textboxVal">
Run Code Online (Sandbox Code Playgroud)
出于某种原因,当我在文本框中输入值时,设置为ng-model的textboxVal不会更新.但是如果我不使用ng-include并直接将view.html的内容添加到主html文件中,这样可以正常工作.请帮忙.
谢谢Sunil
我尝试包含角度模板ng-include.要包含的页面:
<table class="table table-hover table-striped">
<thead>
<tr>
<th translate>
First
</th>
<th translate>
Second
</th>
<th translate>
Third
</th>
</tr>
</thead>
<tbody>
<ng-include src="getTemplate('default')"></ng-include>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
模板:
<tr class="table-row-clickable">
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
Run Code Online (Sandbox Code Playgroud)
获取模板方法:
$scope.getTemplate = function(templateName) {
return APP_CONFIG.TPL_PATH + '/path/' + templateName + '.html';
};
Run Code Online (Sandbox Code Playgroud)
模板加载正常,我可以在页面上看到它,但在错误的地方.这是我浏览器控制台的屏幕,ng-include表格之前的插页,而不是在其中:

你能帮我理解一下,为什么?先感谢您.