我试图通过使用AngularJS找到获取和设置HTML标记中的属性值的最佳方法.例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
<h1>Title</h1>
<p>Praragraph1</p>
<p data-mycustomattr="1234567890">Paragraph 2</p>
<p>Paragraph 3</p>
<footer>Footer</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后,当我调用url'/ home'时,我想从data-mycustomattr获取值(我将用于另一次计算),然后将其替换为"1",
如果url是'/ category',我想从data-mycustomattr获取值,并将其替换为"2".
使用jQuery非常简单:
$("#myPselector").attr('data-mycustomattr');
Run Code Online (Sandbox Code Playgroud)
要么
$("#myPselector").attr('data-mycustomattr','newValue');
Run Code Online (Sandbox Code Playgroud)
我使用了jQuery代码,将它放在我的控制器中,它工作正常.但据我所知,这可能是一个不好的做法.
但是,我发现使用指令的解决方案对于这么简单的任务来说太大了.所以我想知道在特殊情况下将jQuery和AngularJS结合起来可能不会太糟糕.
你怎么看?您是否有更好的解决方案来获取和设置属性的值?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
<h1>Title</h1>
<p>Praragraph1</p>
<p data-mycustomattr="{{mycustomattr}}">Paragraph 2</p>
<p>Paragraph 3</p>
<footer>Footer</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后,进入控制器,我插入:
$scope.mycustomattr = '1';
Run Code Online (Sandbox Code Playgroud)
阅读:
if ($scope.mycustomattr == '1'){
// code
}
Run Code Online (Sandbox Code Playgroud)
测试和工作正常.
我正在观看在angularjs.org上发表的免费互动课程,以学习Angular,使用Angular js.
在他们说的第一章的这个课程中,使用AngularJS的一个主要原因是,它可以构建"响应式"Web应用程序.(我知道"响应式设计",但这完全是一个不同的东西),并解释说,使用Angular你不需要刷新你的网页来更新它来自网络服务器的数据(他们告诉你这个,就像这是全新的科技!).
我认为与过去10年我们使用Ajax做的事情不一样吗?或者这是完全不同的东西?
请帮助我理解这个因为我是AngularJS的新手.
import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;
@Component({
selector: 'jquery-integration',
templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
elementRef: ElementRef;
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).draggable({
containment:'#draggable-parent'
});
}
}
Run Code Online (Sandbox Code Playgroud)
可以像上面那样在Angular2中使用jQuery与jQuery一起使用吗?如何在Angular2中使用jQuery和JavaScript?
众所周知,不应该在AngularJS控制器中执行DOM操作,但是很难找到为什么它确实是一件坏事.所有消息来源都说它难以测试,因为控制器应该用于指令之间的通信,但是没有用代码说明为什么这是一件坏事.
根据我的理解,我认为控制器与指令不同,不与任何特定的HTML相关联,因此控制器所做的所有DOM修改都很可能会失败.这肯定会使开发和测试变得复杂.
在子指令的链接函数之前执行的指令中的控制器也将失败,因为控制器可能不知道子指令的实际HTML是什么.链接在控制器功能之后执行,可能会修改HTML结构.
我希望我在这里有意义,如果有人能澄清为什么从控制器操纵DOM是一件坏事,也许一些代码示例或链接可以很好地解释它.
我正在为使用AngularJS的应用程序开发项目.我需要根据用户事件(即点击,更改等)操作DOM.
我正在使用vanilla javascript和ng-directives来监听事件 - 没有jquery.我读到在控制器中操作DOM是不好的做法.此外,我不是要尝试ng-include一长串外部JavaScript文件来分隔每个小部件的客户端功能.
我想知道在维护一个整洁/可扩展的项目环境的同时操作DOM的最佳实践是什么?
我正在尝试做的一些例子:我的一个函数是在点击时将类切换为DOM元素.当点击按钮等时,一个功能改变UI中的搜索过滤器.一个按钮根据用户偏好改变视图布局,一个功能改变搜索结果的数量等.
请注意,侧边栏例如需要根据用户操作进行相当多的操作.此外,其他领域,如搜索结果,可以操纵,我想使用最佳实践分别编写应用程序的这两个区域.
我来自Backbone和JavascriptMVC的世界.但我真的很想转而使用AngularJS.到目前为止,我有一个大问题让我无法转换.
我创建单页应用程序.让我们假装它包含一个标签模块,一个文件上传模块和一个文件列表模块.
我在Backbone中要做的是,我将每个模块拆分为独立模块,使用自己的视图模板,viewcontroller等.这样,我就可以在我的应用程序中使用该模块的几个位置.模块除了自身以外不了解任何其他内容.
如何在AngularJS中处理这个问题?是否可以为每个模块创建一个angular.module(例如标签模块)?
我觉得他们告诉如何在他们的文档中创建模块中的许多控制器.但这听起来并不像我需要的那样.或者我在这里误解了一些主要概念?
编辑:我做了更多的研究.它看起来像指令是我正在寻找的.虽然AngularJS中的模块代表整个Web应用程序.因此,名称'组件'和'模块'的混合使我感到困惑.
我现在正走在正确的道路上吗?
我是客户端JavaScript的新手.在一个Web项目中,我发现了angularjs并使用了一些基本的东西.我应该学习jQuery还是只将Angularjs用于其他项目?
我想知道如何在我的角度函数中调用jQuery函数,就像我有一个jquery函数,如:
function testData(){
// code
}
Run Code Online (Sandbox Code Playgroud)
我有一个角度函数,如:
myApp.controller(AppCtrl,['$scope', function($scope) {
$scope.imagesData = function(){
//here I need to call the function: testData()
}
}]);
Run Code Online (Sandbox Code Playgroud)
所以,请告诉我如何在angularjs函数($ scope.imagesData())中调用我的testData().提前致谢.
<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>
Run Code Online (Sandbox Code Playgroud)
我真的很有棱角,所以请温柔!
所以这个想法如上面标题中所述 - 我加载了包含在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>
Run Code Online (Sandbox Code Playgroud)
#angular-test在ajax请求完成后,我想以某种方式初始化仅在容器内活动的角度.我假设它与范围对象有关吗?
谢谢!
我是Angular JS的新手.我需要使用Angular JS,HTML5开发项目.
对于以前项目中的DOM操作,我使用了jQuery框架.现在我很困惑,这是在Angular JS项目中使用jQuery的好方法.因为jQuery的许多功能已经可以使用角度js,即jQLite,但有一些限制.
我也问了很多人,但没有人的回答让我满意,有些人说不,有些人说是.
请帮我解决这个问题.我也在stackoverflow上搜索这个问题,但没有运气.我认为对于那些不熟悉Angular JS并希望使用Angular JS开发应用程序的开发人员来说,这将是有用的.