<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body>
<div id="ajax-content-here">
</div>
</body>
</html>
我真的很有棱角,所以请温柔!
所以这个想法如上面标题中所述 - 我加载了包含在head部分中的角度库的页面.后来我使用ajax(jquery)将数据(下面)加载到div容器中.
<div id="angular-test">
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</div>
#angular-test在ajax请求完成后,我想以某种方式初始化仅在容器内活动的角度.我假设它与范围对象有关吗？
谢谢!
有没有办法克隆AngularJS中的元素,其绑定完好无损？
我正在尝试为图库创建图像预加载器.图像加载到屏幕外,然后根据其大小移动到三列中的一列.所以它实际上确实需要用JavaScript移动,因为我不知道它加载了它应该进入哪个容器.
所以假设我有类似的东西:
<img ng-src="/some/{{image}}" ng-click="doStuff()" />
我希望克隆与此相同,ng-click绑定完好无损.我遇到的问题是,如果我使用element.clone().appendTo(someOtherElement)克隆元素,那么ng-click绑定将在此过程中丢失.当元素插入DOM时,Angular没有意识到它需要创建新的绑定.
我一直在尝试使用$ compile,但我无法弄清楚如何使用它来克隆现有元素而无需手动复制所有属性.
克隆是由一个指令完成的,我只使用Angular(没有jQuery保存Angular中包含的内容).
基本上,我希望用户能够拖放项目或单击向上/向下箭头来移动列表中的项目.
有没有一种很好的方法来更新与ui-sortable/angular-ui一起使用的项目索引？
谢谢.
我们能够通过在控制器中添加一个函数来解决这个问题,该函数将从数组中删除该项并将其添加回一个大于或小于其原始位置的索引中.这是一个草率的例子:
$scope.upDown = function(oldIndex, newIndex) {
var item = $scope.list[oldIndex];
$scope.list.splice(oldIndex,1);
$scope.list.splice(newIndex,0,item);
};
你需要添加一个检查,如果它是数组中的第一个或最后一个elem,相应地禁用向上或向下.
我是Angular JS的新手.我需要使用Angular JS,HTML5开发项目.
对于以前项目中的DOM操作,我使用了jQuery框架.现在我很困惑,这是在Angular JS项目中使用jQuery的好方法.因为jQuery的许多功能已经可以使用角度js,即jQLite,但有一些限制.
我也问了很多人,但没有人的回答让我满意,有些人说不,有些人说是.
请帮我解决这个问题.我也在stackoverflow上搜索这个问题,但没有运气.我认为对于那些不熟悉Angular JS并希望使用Angular JS开发应用程序的开发人员来说,这将是有用的.
有没有办法.parents()在Angular中模拟jQuery的方法,而不必实际包含jQuery？
最终目标是获取DOM元素的所有父元素.
编辑:为什么我需要这个？
我正在创建一个指令(一个类似下拉菜单的小部件).<body>如果在窗口小部件区域外单击,则下拉列表应该监听整个点击并关闭自身(如果它已打开).
现在,我知道如何创建一个监听鼠标事件的简单指令,如下所示:
app.directive('mouseTrap', function() {
return function(scope, elem) {
elem.bind('click', function(event) {
scope.$broadcast('click', { event: event } );
});
};
});
...然后我将这样使用:<body mouse-trap .... >和
$scope.$on('click', function(msg, obj) {
console.log("click!");
});
这是我需要检查被点击对象的任何父项是否是我的小部件的顶级div的地方,如果没有,则关闭小部件.
我是Angular的新人,但我开始做任务,我正在寻求设计方面的帮助.
我需要在每次选择更新时在页面上添加一个新的蓝色框.
的index.html
<div class="col-md-3 col-md-offset-9" ng-controller="selectController">
<select class="form-control"
ng-model="selectedItem"
ng-options="item.Title for item in items"
ng-change="clickOnOption()">
<option label="" value="">Nothing selected</option>
</select>
</div>
<div class=" col-md-12 boxes-container"></div>
app.js
// MODULE
var creatorApp = angular.module('creatorApp', []);
// CONTROLLERS
creatorApp.controller('selectController', ['$scope', function ($scope) {
$scope.items = [
{ID: '1', Title: 'Plan 1'},
{ID: '2', Title: 'Plan 2'},
{ID: '3', Title: 'Plan 3'},
{ID: '4', Title: 'Plan 4'},
];
$scope.selectedItem = '';
$scope.clickOnOption = function(){
console.log($scope.selectedItem.Title);
//old noble jquery
$('.boxes-container').append('<div class="col-md-3" style="height: 30em; background-color:#0000FF;"></div><div …所以我一直在阅读控制器中的jQuery操作是不好的做法,但我不清楚为什么或如何纠正.
下面是来自Youtube教程的代码,即使是视频创建者的评论也是一个坏主意,但无法解释为什么并继续使用不良行为.
来自https://www.youtube.com/watch?v=ilCH2Euobz0#t=553s:
$scope.delete = function() {
var id = this.todo.Id;
Todo.delete({id: id}, function() {
$('todo_' + id).fadeOut();
});
};
解决方案:
根据兰登在下面的回答,我已经得到了以下我自己的工作代码,这些代码与上面的示例代码略有不同:
var ProjectListCtrl = function ($scope, Project) {
$scope.projects = Project.query();
$scope.delete = function() {
var thisElem = this;
var thisProject = thisElem.project;
var id = thisProject.id;
Project.delete({id: id}, function() {
var idx = $scope.projects.indexOf(thisProject);
if (idx !== -1) {
thisElem.destroy('removeItem('+idx+')');
}
});
}
$scope.removeItem = function(idx) {
$scope.projects.splice(idx, 1);
}
}
app.directive('fadeOnDestroy', function() {
return …我是Angular JS的新手,我已经使用jQuery很长一段时间了.这就是为什么我一直很难将jQuery中的jQuery转换为有角度的原因.:d
我想知道如何以角度执行DOM查询.基本上,我面临的情况是我必须做这样的事情
$(".myClass").each(function(){
$(this).doSomething();
})
任何人都可以建议我角度程序员如何做这样的事情.
谢谢
我对AngularJs和数据表很新.我需要使用ng-repeat填充表行中的数据.我能够第一次填充行并启用排序.当我点击箭头来排序或下降行数据擦除.
这是我的表格数据
<table datatable="ng" id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="col1">Campaign Name</th>
<th class="col4">Description</th>
<th class="col5">Activate/Deactivate</th>
<th class="col5">edit</th>
<!-- <th class="col5">status</th> -->
<!-- <th class="col5">Details</th> -->
</tr>
</thead>
<tbody >
<tr ng-repeat="campaign in campaignListData">
<td>{{campaign.campaignObject.campaignName}}</td>
<td>{{campaign.campaignObject.campaignMessage}}</td>
<td><button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px"
value = "{{ campaign.campaignObject.label }}" title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)">
<span style="margin-left:-10px;margin-right:17px;width:128px;height:34px">{{ campaign.campaignObject.label }}</span>
</button>
</td>
<td><a href="<c:url value="${contextPath}/merchant/manageCampaign/editCampaignConfiguration"/>?campaignId={{ campaign.campaignObject.id }}">
<img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="<c:url value="/resources/images/setting.png" />" ></a>
</td>
</tr>
</tbody>
</table>
这是我的排序javascript代码
<script type="text/javascript">
$(document).ready(function() {
$("#noCampaignData").hide();
//$("#example_paginate").hide();
var rowCount …人们似乎反对使用Angular控制器中的jQuery.为什么？？
假设你有:
<div id="test">{{test}}</div>
<button class="btn" ng-click="foo()">test</button>
和
.controller('testCtrl', function($scope, $http, $state){
$scope.test = 'this is the test scope';
$scope.foo = function(){
angular.element("#test1").toggle(300);
}
})
这是一个..
..操纵DOM.
此外,您正在采用Angular强大的框架,并采用经过验证的技术,我们都知道并喜欢.(至少我这样做)
人们说指令应该用于DOM操作,但是指令很复杂且可读性较差.另外,你告诉我每次想要以某种新的方式操作DOM时都必须编写自定义指令吗？是不是没有人有时间!另外,如果不是DOM操作,那么双向数据绑定是什么.什么是控制器,如果不是包含属于给定视图的属性和方法的类,使用jQuery只是另一种排序方法.
我编写的代码清洁并与最佳实践保持一致.任何人都可以给我一个令人信服的理由,为什么控制器中的jQuery与此相反？