我正在使用Angular构建一个Web应用程序,我正在尝试找到一种方法来等待所有data-ng-include元素都已经过评估并且包含完成加载.例如,菜单是一个加载的视图,每个页面的主要内容也是如此,因此至少有两个data-ng-include被评估和加载的s.最重要的是,菜单包含嵌套的data-ng-repeats,构建我的菜单.我需要一种方法来启动脚本,所有这些包括它们内部的任何角度函数,并且DOM已经准备就绪.
当Angular完成页面设置时,是否有任何事件被触发？
AnguarJS的实现是基本的,我们基本上通过使用data-ng-include将其用于模板化.每个页面都是一个视图(不是角度视图,只是一个html文件),通过data-ng-include加载,页眉和页脚在其上方和下方.标题还动态加载包含角度的全局视图(同样不是角度视图)html文件.
到目前为止,菜单是唯一使用AngularJS进行模板操作的东西.它使用它来创建一个菜单,该菜单使用由JSP动态生成并插入从服务器返回的DOM的JSON对象.
为了让前端人员的生活更轻松,任何类型的重复JavaScript功能都被编码到模块中,这些模块在页面加载时检测到,并使用需要附加JavaScript功能的元素上的data-features属性动态加载至.
例如,你可能有<div id="mySubMenu" data-features="subMenu"></div>.在页面加载时,检测到具有data-features元素的每个元素,并加载相关的JS模块,在这种情况下我们将加载/scripts/modules/subMenu.js.
我需要的是一种延迟运行此特征检测和附件的方法,直到包含或其他角度函数产生的所有元素都在页面上并准备好被操作,特别是因为可能存在具有数据特征属性的元素包括.
其他地方的人曾提到将控制器放在身体上并放置它的任何一面但是:
$scope.$on('$viewContentLoaded', function() {
// Init Features Here
});
这没用,所以我在这里寻找其他选择.
我最终在这个问题中使用了Theo的解决方案:当angular.js完成加载时发送事件
所以我希望尽可能地将我的插件库移到Angular上以保持一致.我遇到的问题是在其子代的任何指令运行之后运行指令.
为了清楚起见,我们的目标是让我们的集成商(仅限CSS/HTML的团队成员)轻松地为项目添加动态功能,只需使用功能标记即可.目前,他们通过data-features属性执行此操作.例如,对于图像滑块,它们可以使用data-features="imageSlider"属性标记UL 以使该UL成为滑块.
沿着这些方向,我正在努力将图像滑块模块移动到角度.我希望我的集成商能够写出如下内容:
<ul image-slider>
<li slide>
My Slide 1
</li>
<li slide>
My Slide 2
</li>
<li slide>
My Slide 3
</li>
</ul>
我可以动态地将其转换为图像滑块.以上工作正常,但如果标记看起来像这样:
<ul image-slider>
<li slide ng-repeat="slide in data.slider.slides">
My Slide {{$index}}
</li>
</ul>
然后在指令运行ng-repeat之前没有完成image-slider,这意味着我无法访问所有幻灯片来实现我的魔力.
有没有办法告诉image-slider指令等待其中的任何指令在触发前完成？
我已经阅读了以下问题:
这些似乎都没有解决这个问题,所以我想我会把一个更简洁的问题放在一起,希望找到答案.
运行uglify时,我需要忽略某些文件和文件夹,但仍然会递归扫描整个文件夹结构.
我有一个concat任务,将我的所有插件连接在一起,并使它们成为一个文件.我需要确保uglify忽略这些文件并且不对它们进行操作,因为我不希望它们在目标目录中,因为concat已经为我处理了这些文件.
我尝试将文件和文件夹添加到我的src数组中,使用前面的!,但它仍然可以对它们进行操作.
以下是我正在尝试使用的内容,但它不起作用:
uglify: {
options: {
banner: '/*! <%= grunt.template.today("mm-dd-yyyy h:MM:ss TT") %> */\n'
},
files: {
src: [
'!ie'
,'!polyfills'
,'!vendor'
,'!iecompat.js'
,'**/*.js'
],
dest: 'app/scripts',
cwd: 'sources/scripts',
ext: ".js",
flatten: false,
expand: true
}
},
所以我最近将一些重复的标记移动到ng-template块中,我注意到在块内部,我没有直接访问范围变量,但我仍然可以调用范围函数.
例如,考虑以下标记:
<script type="text/ng-template" id="toggle-button.html">
<button ng-click="toggleFlag()">I Toggle the Flag</button>
<button ng-click="flag = !flag">I Do Nothing</button>
</script>
<span ng-include="'toggle-button.html'"></span>
The flag is {{flag}}
与以下脚本配对:
var app = angular.module('myApp', [])
.controller("myController", ['$scope', function($scope){
$scope.flag = true;
$scope.toggleFlag = function(){
$scope.flag = !$scope.flag;
}
}])
Live JS这个行为的小提琴:http: //jsfiddle.net/uM4Ss/
第一个按钮工作,第二个按钮不工作.有人可以回答为什么会这样吗？
我正在使用 Angular 4、NPM、Node.js 和 Angular CLI 进行一个项目。
我需要在@Injectable没有 HTTP 请求的情况下将JSON 加载到 Angular 服务中（使用），即它总是作为包的一部分在本地加载，而不是从服务器检索。
到目前为止，我发现的所有内容都表明您要么必须修改项目typings.d.ts文件，要么使用 HTTP 请求从/assets文件夹或类似文件中检索它，这两种方法都不适合我。
我想要完成的是这个。给定以下目录结构：
/app
/services
/my-service
/my.service.ts
/myJson.json
我需要my.service.ts正在使用的服务@Injectable来加载 JSON 文件myJson.json。对于我的特殊情况，文件旁边会有多个 JSON 文件，这些my.service.ts文件都需要加载。
澄清一下，以下方法对我不起作用：
网址：https : //stackoverflow.com/a/43759870/1096637
摘抄：
// Get users from the API
return this.http.get('assets/ordersummary.json')//, options)
.map((response: Response) => {
console.log("mock data" + response.json());
return response.json();
}
)
.catch(this.handleError);
网址： …
我正在为我的网站编写一个登录脚本.我编写了登录脚本,并通过jQuery通过AJAX调用将表单绑定到它.
这是表单调用的php:
<?PHP
# Make sure form data was passed to the script
IF (isset($_POST) && isset($_POST['username']) && isset($_POST['password'])){
# Connect to the database
REQUIRE('../../../../my_db.php');
# Define variables
$given_username = $_POST['username'];
$given_password = $_POST['password'];
$hashed_password = md5($given_password);
$matched_username = "";
$matched_password = "";
# See if there is matching info in the database
$sql = 'SELECT username, pass FROM users WHERE username="'.$given_username.'" AND pass = "'.$hashed_password.'"';
$result = mysql_query($sql);
WHILE($row = mysql_fetch_assoc($result)){
$matched_username = $row['username'];
$matched_password = $row['pass'];
};
# …所以我有一个Angular 2和Typescript项目,我希望在特定点击的页面上清除所有焦点.
现在我只是document.activeElement用来获取当前活动的元素,然后调用.blur()它.然而,这在语义上是不正确的,当然TypeScript正在抛出它(并且理所当然).
有什么方法可以完成同样的事情,但确保我引用的是一个HTMLElement而不是Element所以我可以保持正确输入的东西？
基本上我在调用函数来关闭所有子菜单时A)单击子导航并单击菜单项已经打开,并且B)当文档被点击在不是菜单项的任何地方时.
这是被调用的函数:
closeMenus = function(){
for (var i=0, j=this.openElements.length; i<j; i++){
this.openElements[i] = false;
};
document.activeElement.blur();
};
这给出了错误:
Property 'blur' does not exist on type 'Element'
这是绝对正确的,它存在于HTMLElement.但是,如果我添加此行:
console.log(document.activeElement instanceof HTMLElement);
这返回true.所以我对TypeScript在这里想要什么感到非常困惑？
我知道这不会这么困难，我想做的就是检测查询参数并将其传递给我的组件。我需要做什么才能从 Vue 中的组件访问路由器？
<router-link :to="{ path: '/', query: { myQuery: /*query parameter here/* } }" >Go There</router-link>
无论我做什么我都无法弄清楚。我已经尝试了网上能找到的所有方法，但由于某种原因，Vue 中“this”不存在，我真的准备放弃并回到 Angular。
说真的，我什至无法在标签内访问它，并且从路由文件导入实际的路由器没有任何作用。
我怎样才能做到这一点？我觉得在任何框架中从 url 获取查询参数都不应该这么复杂。我一整天都在阅读手册，有人可以帮我吗？
我想在我的网站上动态添加一些复选框,并根据它们的值进行过滤.
我在通过ng-model将每个过滤器添加到过滤器对象的部分失败了.
<div ng-repeat="filter in menu.filters">
<label>{{filter.title}}</label>
<input type="checkbox" ng-model="filters.filter{{$index+1}}" ng-true-value="{{filter.stub}}" ng-false-value='' />
</div>
然而{{$index+1}},事实上,任何{{}}在ng-model属性中的使用都会破坏整个循环.
我错过了什么？
这是页面的完整代码:
<script type="text/ng-template" id="menu_item_renderer.html">
{{category.title}}
<ul class="global-menu-category-list">
<li ng-repeat="category in category.categories | filter:filters" ng-include="'menu_item_renderer.html'"></li>
</ul>
<ul class="global-menu-link-list">
<li ng-repeat="link in category.links | filter:filters">
<a href="{{link.link}}">{{link.title}}</a>
</li>
</ul>
</script>
<form>
<div ng-repeat="filter in menu.filters">
<label>{{filter.title}}</label>
<input type="checkbox" ng-model="filters.filter($index+1)" ng-true-value="{{filter.stub}}" ng-false-value='' />
</div>
</form>
<div id="#global-menu" data-feature="globalMenu">
<ul id="global-menu-categories">
<li ng-repeat="category in menu.categories" ng-include="'menu_item_renderer.html'"></li>
</ul>
</div>
目标是让复选框过滤菜单项.
模型如下:
'menu' = {
'filters': …我正在尝试在Angular中创建由JSON驱动的动态多级主导航(菜单).
在AngularJS中,我会定义一个模板并递归地使用它来根据需要动态创建额外级别的菜单.
在Angular中,我无法找到一种动态创建这些级别菜单的方法.
现在我将它硬编码为允许两个级别,但如果将来需要添加更多级别,则每个级别都必须硬编码才能工作.
我正在寻找一种方法来根据菜单返回的JSON动态执行此操作.
menu = [
{
title: "Menu Item 1",
url: "/",
target: "_blank"
},
{
title: "Menu Item 2",
active: true,
navigationItems: [
{
title: "Sub-Menu Item 1",
url: "/"
},
{
title: "Sub-Menu Item 2",
url: "/",
navigationItems: [
{
title: "This Level Not Supported Without Hard-Coding"
}
]
}
]
}
]
<div>
<ul role="menubar">
<li *ngFor="let link of menu; let i = index;">
<a
[attr.href]="link.href ? link.href : null"
[attr.target]="link.target …根据标题，我很好奇是否每次我使用setIntervalif创建间隔，因为 Angular 进行了匀场，如果每次间隔运行时都会创建一个更改检测事件。
我一直在阅读我能找到的所有文档，但我找不到明确的答案。
为了澄清起见，我的问题是，如果我运行以下代码，间隔的每次迭代是否会触发更改检测事件并导致 Angular 尝试更新应用程序的视图，直到满足条件？
let myInterval = setInterval( () => {
if (conditionsAreMet()){
clearInterval(myInterval);
}
})
javascript ×5
angular ×4
angularjs ×4
jquery ×2
typescript ×2
ajax ×1
gruntjs ×1
html ×1
json ×1
object ×1
php ×1
vue-router ×1
vue.js ×1