标签: angularjs-ng-include
ng-model在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>
部分代码view.html是
<input type="text" ng-model="textboxVal">
出于某种原因,当我在文本框中输入值时,设置为ng-model的textboxVal不会更新.但是如果我不使用ng-include并直接将view.html的内容添加到主html文件中,这样可以正常工作.请帮忙.
谢谢Sunil
推荐指数
解决办法
查看次数
angularjs/rendering内联或使用ng-include之间的性能差异
我可以使用ng-include在角度视图中包含部分内容,或者我可以使用服务器端部分在服务器上执行此操作.我正在考虑使用服务器端部分而不是角度部分,然后使用ng-include(使用脚本标记),因为我在某处看到角度部分创建了新的范围,这可能会损害$ digest的性能.
这是否有效.使用角度包含时对性能的影响是什么
推荐指数
解决办法
查看次数
如何捕获角度ng-include错误
当我ng-include用作标题时,如何在地址(文件路径)不存在时捕获错误？
我完成了一个ng-include router内部ng-view(with ng-route),它有点像这样:
ContentCtrl:
var content = $route.current.params.content,
tmplArr = content.split("_"),
tmpl = {},
personId=$route.current.params.personId||$scope.persons[0].id;
$scope.personId=personId;
tmpl.url = "content/";
for (var i = 0, len = tmplArr.length; i < len; i++) {
tmpl.url += tmplArr[i] + "/";
}
tmpl.url = tmpl.url.substring(0, tmpl.url.length - 1) + ".html";
$scope.template = tmpl;
ContentView:
<div ng-include="template.url" class="ng-animate"></div>
当我使用addr时不存在如:/ home /#/ content/profile_asdfa,angular只是在循环中获取资源.所以当哈希中没有模板文件时,我需要捕获ng-include错误.有谁能够帮我 ？谢谢!
推荐指数
解决办法
查看次数
我可以嵌套ng-include吗？
我有一个插入的模板,ng-include该模板也有一个ng-include.内部ng-incude没有显示.为什么？
主要模板:
<div ng-include src="'views/outer.html'"></div>
意见/ outer.html:
<div ng-repeat="item in items">
// Stuff
<div ng-include src="'views/inner.html'"></div> // not being shown
// More stuff
</div>
推荐指数
解决办法
查看次数
如何制作列表和网格视图切换开关控件加载AngularJS中的部分？
我是AngularJS的新手,我一直无法找到列表和网格视图切换开关按钮的特定教程,这些按钮加载了两个不同的HTML部分.阅读官方的ng-include,ng-switch官方的文档和搜查.不幸的是,我们不想使用UI路由器.
是加载两个部分(list.html和grid.html)正确的Angular编码方式吗？
我找到的最相关的帮助是这些:
1. http://tutorialzine.com/2013/08/learn-angularjs-5-examples(示例#5)
对例#5有一个有见地的评论
很好的简单例子 - 干得好.在网格和列表视图之间切换的最后一个示例效率不高,因为它创建了两个选项并显示/隐藏了一个选项.更简单/更好的方法是使用带有转发器和ng-switch的单个ul,然后使用ng-switch-case启用备用列表元素. - 约翰
2. http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html
3. 为angularjs中的多个局部视图创建单个html视图
我的HTML代码
<div class="col-xs-6" ng-controller="ToggleDisplayCtrl">
<div class="btn-group select-format-container" ng-switch on="selected">
<button ng-switch-when="true" ng-click="toggleGrid()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">grid</button>
<button ng-switch-when="false" ng-click="toggleList()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">list</button>
</div>
<div ng-include src="formatChoice.url" scope="" onload=""></div>
</div><!-- col-xs-6 END ToggleDisplayCtrl-->
我的指令代码
'use strict';
var app = angular.module('tempApp');
app.controller('ToggleDisplayCtrl', function($scope) {
$scope.formatChoices …推荐指数
解决办法
查看次数
防止`ng-include`创建隔离范围.AngularJS
我ng-include src在HTML中的多个地方使用指令.每个ng-include都为自己创造了一个孤立的范围,这显然给我带来了很多麻烦.
例如.
<div ng-controller="parent">
<div ng-include src="'id1'">
</div>
<div ng-include src="'id2'">
</div>
<div ng-include src="'id2'">
</div>
</div>
在上面提到的html中,创建了4个范围.在父级中controller定义了1,默认情况下每个都创建了3个ng-include src.
是否可以防止ng-include为自己创建一个孤立的范围？如果不可能那么有一个解决方法吗？
javascript directive angularjs angularjs-directive angularjs-ng-include
推荐指数
解决办法
查看次数
ng-include - 多次调用Controller
情况:
我试图包括一个部分,ng-include而不需要任何路由.我只想动态地包含许多特定部分.这或多或少看起来像:
<div ng-controller="SomeController">
//This controller defines a $scope.getPartial(id)
<ng-include src="getPartial(something.id)"></ng-include>
</div>
它有效,部分包括在内.但是看着控制台,我可以看到控制器被多次调用,第一次被调用时,我得到了404
GET path/to/partials/undefined.html [HTTP/1.1 404 Not Found 162ms]
当包含首次出现时,似乎没有定义something.id.
问题:
- 如何在不创建新范围的情况下简单地包含部分内容？
- 如果那是不可能的,我怎么能确定,控制器只被调用一次？
- 我怎么能避免404？
我对AngularJS很新,因此可能会对事情做出错误的假设或错过明显的事情,请赐教.
推荐指数
解决办法
查看次数
AngularJS ng-include:onload调用包含在控制器中定义的函数
使用AngularJS,是否可以使用"onload"参数来触发在"子"控制器(由包含的模板调用的控制器)中定义的函数？
例:
<!-- parent container -->
<div ng-include="'/path/template.html'" onload="childOnLoad()"></div>
<!-- template.html -->
<div ng-controller="childController">
<p ng-bind="txt"></p>
</div>
<!-- childController.js -->
app.controller('childController', function($scope) {
$scope.txt = "Test text";
$scope.childOnLoad = function() {
alert("Loaded!");
};
});
是否有意义？或者我应该简单地调用childController中的函数,如下所示？
<!-- childController.js -->
app.controller('childController', function($scope) {
$scope.txt = "Test text";
$scope.childOnLoad = function() {
alert("Loaded!");
};
$scope.childOnLoad();
});
推荐指数
解决办法
查看次数
Angular JS:在另一个ng-include中包含部分HTML
我正在使用index.htmlYeoman创建的,看起来像这样:
<html>
<head>...</head>
<body>
<div ng-include="'views/main.html'"></div>
</body>
</html>
现在,我知道我不能ng-include在另一个内部使用ng-include,所以我甚至不尝试,但这是我想要实现的目标.
我ui.router在我的main.html中使用嵌套视图,但我做不到这样的事情:
<header class="header">
<!-- Rather long HTML code that I would like to put in
a separate file like 'views/parts/header.html' -->
</header>
<div ui-view="" class="container"></div>
一个天真的解决方案是消除第一个ng-include并在main.html中使用它作为页眉,页脚和类似的东西.
所以,用你所拥有的东西打我,但不是那个!
编辑:这是我希望拥有的(但不能,因为我已经在里面了ng-include)
<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div>
推荐指数
解决办法
查看次数
如果在ng-include中验证不起作用
我有一个简单的页面验证字段,类似这样:
employee.html并验证字段但如果我添加了相同的代码并使用ng-include调用相同的页面验证不起作用
without ng-include 验证工作:
<form name="form" class="form-horizontal" ng-validate="create(data)" novalidate>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="" class="col-xs-6 control-label">First Name:</label>
<div class="col-xs-6">
<input name="first_name" type="text" class="form-control" ng-model="data.first_name" placeholder="First name" ng-required="true">
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
</div>
</div>
</div>
</div>
</form>
with ng-include 验证不起作用:
dashboard.html
<div class="container">
....................
..................
<ng-include src="employee.html"></ng-include>
</div>
我的问题是:如何在ng-include中进行验证？
推荐指数
解决办法
查看次数