当我单击"检查"按钮时,以下代码抛出错误"TypeError:无法读取属性'$ pristine'的undefined".
app.controller('MainCtrl', function($scope) {
// other stuff
})
.controller('Ctrl2', function($scope) {
$scope.product = {description:'pump'};
$scope.output = 'unknown';
// uncomment to avoid undefined error, still can't see $pristine
// $scope.formHolder = {};
$scope.checkForm = function() {
$scope.descriptionTest = $scope.product.description;
if ($scope.formHolder.productForm.$pristine) {
$scope.output = 'yes';
}
if ($scope.formHolder.productForm.$dirty) {
$scope.output = 'no'
}
}
});
HTML
<body ng-controller="MainCtrl">
<div >
<ng-include ng-controller="Ctrl2" src="'myForm.html'"></ng-include>
</div>
</body>
myForm.html
<form name="productForm" novalidate>
<h2>myForm</h2>
description: <input type="text" name="description" ng-model="product.description"/>
<br>
<button ng-click="checkForm()">Check Form</button>
<br> …我是webpack的新手,现在我在我的一个角度项目中第一次使用它.
我想在我的html文件中使用require函数,以便需要ng-include的模板,如下所示:
<div ng-include="require(./my-template.html)"></div>
我知道有像ng-cache和ngtemplate这样的加载器,但它们并不像我需要的那样工作.有了它们,我必须首先在js中要求模板,而不是在我的html文件中使用模板名称.
怎么做到这一点？
我正在努力思考如何使用ng-include不使用额外的DOM元素,因为我正在从简单的HTML演示中构建一个角度应用程序.我正在使用非常纤薄的HTML与完全开发的,严格的DOM耦合的CSS(由SASS构建)和重构是我想不惜一切代价避免的.
这是实际的代码:
<div id="wrapper">
<header
ng-controller="HeaderController"
data-ng-class="headerType"
data-ng-include="'/templates/base/header.html'">
</header>
<section
ng-controller="SubheaderController"
data-ng-class="subheaderClass"
ng-repeat="subheader in subheaders"
data-ng-include="'/templates/base/subheader.html'">
</section>
<div
class="main"
data-ng-class="mainClass"
data-ng-view>
</div>
</div>
我需要<section>作为重复元素,但有自己的逻辑和不同的内容.内容和重复次数都取决于业务逻辑.如您所见,将ng-controller和ng-repeat放在<section>元素上将不起作用.但是,插入一个新的DOM节点会是什么,这正是我想要避免的.
我错过了什么？这是最佳做法还是有更好的方法？
编辑:只是为了澄清评论中的问题,我试图生成的最终HTML将是:
<div id="wrapper">
<header>...</header>
<section class="submenuX">
some content from controller A and template B (e.g. <ul>...</ul>)
</section>
<section class="submenuY">
different content from same controller A and template B (e.g. <div>...</div>)
</section>
<section class="submenuZ">
... (number of repetitions is defined in controller A e.g. through some service)
</section>
<div>...</div>
</div>
我想使用相同的模板B(subheader.html)的原因是为了代码清洁.我设想subheader.html有一些ng-switch来返回动态内容. …
我已经工作了几个小时来获取我的链接,使用我的AngularJS应用程序点击进入不同的视图.
但是,我似乎只能在Plunker上获得在线工作的功能.
我一直在尝试在本地测试我的机器上的点击功能,而ng-view似乎没有加载.当我下载我知道的Plunker代码是正确的,因为它正在使用Plunker时,ng-view似乎在本地托管后退出工作.
我也有类似的问题,我已经将ng-include和指令定义为他们自己的HTML标签.
有没有理由这些不能在我的电脑上本地工作？(还有一种方法可以用来测试它吗？)
如果您愿意,可以在这里查看我在Plunker上谈论的一些代码.
我有一个角度应用程序,并希望在模板中,添加其他作为div.ng-include似乎是一个完美的选择.
在main.html中
<div id="page-wrapper">
<div ng-include src="'/partials/module.html'"></div>
</div>
在module.html中
<div class="module">
<h1>Module</h1>
</div>
所有文件都存在于应用程序的partials-folder中.
当运行它时,在html代码中的位置,我得到<!-- ngInclude: -->,并用main支持的ng-include标记替换main.html中的div,它编译为<!-- ngInclude: undefined -->.
有谁知道可能是什么问题？
在尝试添加ng-view内部时ng-include,没有任何反应.例如,在下面的代码中,当themes/midnight/index.html成立时ng-view,不会呈现任何视图:
<ng-include src="'themes/midnight/index.html'"></ng-include>
但是,如果我使用下面的代码,视图会显示两次:
<ng-include src="'themes/midnight/index.html'"></ng-include>
<div ng-view></div>
有什么问题,如何解决？
我正在尝试使用Angular 1.5.8构建一种动态仪表板.直到最后的障碍,我取得了不错的进步.这实际上是渲染动态组件.
我已经尝试了2个选项,要么添加一个ui-view并以编程方式传递窗口小部件的名称,要么,这就是我猜的路径更正确,我需要弄清楚如何渲染动态窗口小部件.
例如:当我将item和item附加到dashItems集合时,它应该呈现一个新的小部件(基于我提供的名称)
我已经看到我可以使用替换模板ngInclude,但我仍然不清楚如何动态注入模板和控制器.(我所有的模板都不会共享一个共同的控制器).
JavaScript的:
angular
.module('myDashboard', [])
.config(routesConfig)
.component('dashboard', {
templateUrl: 'dashboard/dashboard.tpl.html',
controller: dashboardController
})
.component('widgetPie', {
template: '<h3>Pie Graph</h3>',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h3>Line Graph</h3>',
controller: function($log) {
$log.info('WidgetLine: loaded');
}
});
function routesConfig($stateProvider) {
// this is only needed if I go the ui-view route.. I assume
$stateProvider
.state('widgetPie', { component: 'widgetPie'})
.state('widgetLine', { component: 'widgetLine'});
}
function dashboardController($log) …我想知道设计一个关于性能的角度应用程序的最佳方法,用于构建具有可重用小部件(如标题,侧边栏,页脚等)的HTML模板.基本上,主要内容是中心DIV,其内容在路径之间变化,页眉和页脚几乎总是相同,侧边栏在某些页面中可能会有所不同.
--- index.html
<body ng-cloak>
<div data-ng-include data-src="'partials/template/header.html'"></div>
<div data-ng-include data-src="'partials/template/sidebar.html'"></div>
<div ng-view></div>
<div data-ng-include data-src="'partials/template/footer.html'"></div>
</body>
- header.html
<div id="header">
// ... HTML CONTENT
</div>
在$ templateCache中使用header.html会更好吗？例如:
- header.html
<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
<div id="header">
// ... HTML CONTENT
</div>
</scipt>
或者我应该为每个小部件使用指令,例如:<appHeader></appHeader>......？
哪一个在性能,内聚性,可重用性和可伸缩性方面更好,以便在每个屏幕上嵌入这些小部件？
performance angularjs angularjs-directive angularjs-ng-include
我的角度项目的路径是这样的
web
server.py ##flask server program
app
static
app.js
controllers.js
etc...
templates
index.html
home.html
的index.html
<!-- this didn't work -->
<ng-include src="templates/home.html"><ng-include>
<!-- nor did this -->
<ng-include src="home.html"></ng-include>
home.html的
<h1> home! </h1>
除了我在输出中没有看到部分(home.html).
有谁看到我的错误？
我是angularjs的新手,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中.
我有2个视图管理angular-route,两个html视图都包含一个仅包含charts-element的html页面.
问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载但图表不会重新绘制.现在,如果我回到第一眼看到它的空白.
链接到Plunker
我做错了什么？我的指令有问题吗？
提前致谢.
charts angularjs angularjs-directive angularjs-ng-include chart.js
angularjs ×10
html ×2
chart.js ×1
charts ×1
components ×1
dynamic ×1
filepath ×1
javascript ×1
ng-view ×1
partials ×1
performance ×1
webpack ×1