相关疑难解决方法(0)

如何使用AngularJS获取和设置HTML标记的属性值?

我试图通过使用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结合起来可能不会太糟糕.

你怎么看?您是否有更好的解决方案来获取和设置属性的值?

ANSWER基于Jonathan的回复:

<!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)

测试和工作正常.

html jquery angularjs

16
推荐指数
1
解决办法
4万
查看次数

AngularJS"响应"调用与旧的AJAX调用之间有什么不同?

我正在观看在angularjs.org上发表的免费互动课程,以学习Angular,使用Angular js.

在他们说的第一章的这个课程中,使用AngularJS的一个主要原因是,它可以构建"响应式"Web应用程序.(我知道"响应式设计",但这完全是一个不同的东西),并解释说,使用Angular你不需要刷新你的网页来更新它来自网络服务器的数据(他们告诉你这个,就像这是全新的科技!).

我认为与过去10年我们使用Ajax做的事情不一样吗?或者这是完全不同的东西?

请帮助我理解这个因为我是AngularJS的新手.

ajax angularjs

15
推荐指数
1
解决办法
8923
查看次数

如何在角度2中使用jQuery和javascript

    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?

jquery typescript angular

15
推荐指数
3
解决办法
6万
查看次数

AngularJS - 为什么在控制器中操作DOM是一件坏事?

众所周知,不应该在AngularJS控制器中执行DOM操作,但是很难找到为什么它确实是一件坏事.所有消息来源都说它难以测试,因为控制器应该用于指令之间的通信,但是没有用代码说明为什么这是一件坏事.

根据我的理解,我认为控制器与指令不同,不与任何特定的HTML相关联,因此控制器所做的所有DOM修改都很可能会失败.这肯定会使开发和测试变得复杂.

在子指令的链接函数之前执行的指令中的控制器也将失败,因为控制器可能不知道子指令的实际HTML是什么.链接在控制器功能之后执行,可能会修改HTML结构.

我希望我在这里有意义,如果有人能澄清为什么从控制器操纵DOM是一件坏事,也许一些代码示例或链接可以很好地解释它.

javascript angularjs

13
推荐指数
1
解决办法
5960
查看次数

Angular app DOM操作最佳实践

我正在为使用AngularJS的应用程序开发项目.我需要根据用户事件(即点击,更改等)操作DOM.

我正在使用vanilla javascript和ng-directives来监听事件 - 没有jquery.我读到在控制器中操作DOM是不好的做法.此外,我不是要尝试ng-include一长串外部JavaScript文件来分隔每个小部件的客户端功能.

我想知道在维护一个整洁/可扩展的项目环境的同时操作DOM的最佳实践是什么?

我正在尝试做的一些例子:我的一个函数是在点击时将类切换为DOM元素.当点击按钮等时,一个功能改变UI中的搜索过滤器.一个按钮根据用户偏好改变视图布局,一个功能改变搜索结果的数量等.

请注意,侧边栏例如需要根据用户操作进行相当多的操作.此外,其他领域,如搜索结果,可以操纵,我想使用最佳实践分别编写应用程序的这两个区域.

javascript angularjs

11
推荐指数
0
解决办法
226
查看次数

如何将大型AngularJS项目拆分为模块

我来自Backbone和JavascriptMVC的世界.但我真的很想转而使用AngularJS.到目前为止,我有一个大问题让我无法转换.

我创建单页应用程序.让我们假装它包含一个标签模块,一个文件上传模块和一个文件列表模块.

我在Backbone中要做的是,我将每个模块拆分为独立模块,使用自己的视图模板,viewcontroller等.这样,我就可以在我的应用程序中使用该模块的几个位置.模块除了自身以外不了解任何其他内容.

如何在AngularJS中处理这个问题?是否可以为每个模块创建一个angular.module(例如标签模块)?

我觉得他们告诉如何在他们的文档中创建模块中的许多控制器.但这听起来并不像我需要的那样.或者我在这里误解了一些主要概念?

编辑:我做了更多的研究.它看起来像指令是我正在寻找的.虽然AngularJS中的模块代表整个Web应用程序.因此,名称'组件'和'模块'的混合使我感到困惑.

我现在正走在正确的道路上吗?

angularjs

9
推荐指数
1
解决办法
3724
查看次数

应该学习angularjs没有jQuery?

我是客户端JavaScript的新手.在一个Web项目中,我发现了angularjs并使用了一些基本的东西.我应该学习jQuery还是只将Angularjs用于其他项目?

javascript jquery angularjs

9
推荐指数
1
解决办法
7357
查看次数

如何在angularjs函数中调用jQuery函数

我想知道如何在我的角度函数中调用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 javascript jquery angularjs

9
推荐指数
1
解决办法
2万
查看次数

仅在通过ajax加载的页面中使用Angular

<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请求完成后,我想以某种方式初始化仅在容器内活动的角度.我假设它与范围对象有关吗?

谢谢!

jquery angularjs angularjs-scope

8
推荐指数
1
解决办法
3588
查看次数

这是在Angular JS项目中使用jQuery的好习惯吗?

我是Angular JS的新手.我需要使用Angular JS,HTML5开发项目.

对于以前项目中的DOM操作,我使用了jQuery框架.现在我很困惑,这是在Angular JS项目中使用jQuery的好方法.因为jQuery的许多功能已经可以使用角度js,即jQLite,但有一些限制.

我也问了很多人,但没有人的回答让我满意,有些人说不,有些人说是.

请帮我解决这个问题.我也在stackoverflow上搜索这个问题,但没有运气.我认为对于那些不熟悉Angular JS并希望使用Angular JS开发应用程序的开发人员来说,这将是有用的.

jquery angularjs

8
推荐指数
1
解决办法
5345
查看次数