如何在Angular指令中获取元素的当前类
在Angular指令中获取元素的当前类可以通过以下步骤实现：
- 首先，在指令的构造函数中注入ElementRef和Renderer2。ElementRef是一个包装了DOM元素的引用，而Renderer2是Angular提供的用于操作DOM的渲染器。
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
}
}- 在指令的适当位置，使用elementRef.nativeElement来获取原生DOM元素的引用。
ngAfterViewInit() {
const element = this.elementRef.nativeElement;
// 这里可以对元素进行操作
}- 如果想要获取元素的当前类，可以使用element.classList属性来获取元素的类列表。
ngAfterViewInit() {
const element = this.elementRef.nativeElement;
const currentClasses = element.classList;
// 这里可以对类进行操作
}- 如果想要判断元素是否包含某个特定的类，可以使用classList.contains()方法。
ngAfterViewInit() {
const element = this.elementRef.nativeElement;
const hasClass = element.classList.contains('my-class');
// 这里可以根据hasClass的值进行相应的操作
}需要注意的是，以上代码中的myDirective是自定义指令的选择器，可以根据实际情况进行修改。另外，如果想要在Angular中操作DOM元素，建议使用Renderer2来代替直接操作原生DOM，以确保应用的安全性和可维护性。
关于Angular指令和元素操作的更多信息，可以参考腾讯云的Angular开发文档：Angular开发文档
相关·内容
我必须创建一个Angular 7指令，在这里我可以从元素(ElementRef)中切换(添加/删除)一个类。当类不在元素中时，添加它；当类在元素中时，删除它。 我知道如何添加/删除类...但是如何获取元素的当前类呢？这样我就可以检查是否需要添加或删除
浏览 38提问于2019-04-25得票数 0
2回答
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
1回答
我希望将类设置为活动的，并在用户单击一个选项时运行一个函数。我尝试将我的JQuery代码转换成angular2，Jquery代码如下：
function setOption (segmented, option) {
$(segmented+" span").removeClass("selected");
const o = $(option);
const u = $(segmented+">.underline");
o.addClass("selected");
o.css(&
浏览 0提问于2017-01-25得票数 1
我有一个问题，为每个面板在一个角手风琴儿童范围。
手风琴是使用这种格式的数据建立的：
$scope.accordionData = [
{'partial': 'desktop-ui/partials/test1.html', 'args':{'key1': $scope.args.users,'key2': 'http://www.sungard.com'}},
{'partial': 'desktop-ui/partials/test2.h
浏览 1提问于2014-05-20得票数 0
回答已采纳
在Angular2中，我需要复制节点，而不是在某些情况下移动它。该节点具有angular2属性，因此cloneNode无法工作。我该怎么做呢？
*什么不起作用？
let el = <HTMLElement>document.getElementById(divId);
if ((<HTMLElement>el.parentNode).id == 'itsMe')
el = <HTMLElement>el.cloneNode(true);
document.getElementById(anotherId
浏览 5提问于2017-01-29得票数 3
回答已采纳
1回答
viewBannerCtrl是控制器，因为我在这里使用"customTable“指令，我不能从指令中访问"VBC.bannerAlert()”函数，我将代码附加到指令中，但不能使用附加标签访问控制器函数
.controller('viewBannerCtrl',function(){
vbc.bannerAlert = function(){
alert('success called in inside directive.....Hurry!!!!!!!!!!!!!!!!!!');
};
});
.direc
浏览 1提问于2016-02-25得票数 0
正如我们所知，Angular2没有ng-init之类的东西。因此，如果我们尝试这样做：
<div #rr="2+2">
{{rr}}
</div>
我们将得到运行时错误：
Error: There is no directive with "exportAs" set to "2+2"
我在上观看了一个Angular2开发人员的视频，看到了完全相同的结构。截图如下：
对用户模板变量的赋值是如何实现的？
浏览 0提问于2016-05-23得票数 7
我正在尝试将jtable包装在angularjs指令中。但是我不能运行它。它在jquery中工作得很好，有人能帮我吗？
我的html代码是：
<jtable></jtable>
我的Angular代码是：
myApp.directive("jtable",function(){
return
{
link: [function(scope, el, attrs) {
el.jtable({
title: 'Table of people',
浏览 0提问于2016-12-08得票数 0
1回答
我有以下从服务器接收的数据
{
name: "Sam {{{{aaa}}}}"
}
在angular中，我使用以下代码将其打印出来
<span>{{name}}</span>
预期输出为
<span>Sam {{{{aaa}}}}</span> <!-- I dont want the curly braces here to act as a variable -->
但它抛出了一个错误。看起来Angular也在尝试插入字符串name。如何告诉Angular将其视为惰性字符串而不是变量？
我还探索了使用自定义
浏览 0提问于2016-03-01得票数 0
2回答
我想在滚动页面时改变用户界面，为此我想得到div元素的位置(顶部和底部)，我如何在angularjs中做到这一点？在下面的代码中，我如何获取top_position？
var w=angular.element($window);
w.bind('scroll', function(){
var top_div=angular.element($('#top-div'));
// now here what function should i use ?
console.log("the top of the div havi
浏览 0提问于2016-01-30得票数 5
回答已采纳
1回答
var app = angular.module('app', [])
app.controller('MainController', function MainController() {})
app.controller('directiveCtrl', function directiveCtrl() {})
.directive('controllerName', function($timeout) {
return {
restrict: 'A',
temp
浏览 2提问于2017-05-22得票数 0
我在我的角度应用程序中创建了一个简单的自定义input组件--使用ControlValueAccessor。因此，当我想创建一个表单input元素时，我不需要调用<input />，只需要调用<my-input>。
我有一个问题，当我使用<input />时，我可以使用myDirective。例如：
<input type="text" class="form-control" formControlName="name" myDirective />
但是，当我使用my-input时，我就不能使用
浏览 5提问于2020-02-19得票数 6
回答已采纳
1回答
我正在开发一个更大的应用程序，我们正在使用延迟加载模块。加载模块之后，在某些情况下，组件会被呈现到<ng-container><ng-container>中。问题是，在容器上定义的动画没有被调用。
我创建了一个虚拟的stackblitz示例来演示我的意思：
app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not
浏览 1提问于2019-09-12得票数 3
2回答
有几个流行的递归angular指令问答。一个优雅的解决方案是将递归功能抽象到一个服务中，并在指令“编译”阶段调用它：
如果我想在新的Angular 1.5 .component()而不是.directive()中使用相同的概念，最好的方法是什么？
浏览 2提问于2016-05-04得票数 3
这是一个奇怪的问题，我们目前正在将一个现有的CakePHP应用程序移植到Angular.JS上，CSS是一样的，总体上看起来都是一样的，但有一些小的变化，比如字体类型或大小，也注意到了间距，填充和边距上的微小差异。
Angular是添加CSS样式还是覆盖现有样式？
浏览 1提问于2012-11-22得票数 0
1回答
我有一个HTML跨度，它有两个超链接。
<span><a href="http://appcarvers.cloudaccess.host/index.php?Itemid=207" alt="Shirley Setia">Shirley Setia</a><i class="fa fa-caret-right"></i>
<a href="http://appcarvers.cloudaccess.host/index.php?Itemid=210" alt=
浏览 2提问于2017-06-08得票数 1
回答已采纳
2回答
我正在使用以下代码成功地编译一个指令：
var element, $injector, $compile, link, scope;
element = angular.element(document.getElementById(#whatever));
$injector = element.injector();
$compile = $injector.get('$compile');
link = $compile(angular.element('<my-directive></my-directive>'));
sco
浏览 1提问于2015-07-30得票数 0
回答已采纳
2回答
我们知道可以通过元素逐个指令访问dom，因为元素是在链接函数中注入的。
见此方法
var app = angular.module("myApp", []);
app.directive('busyBox',function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function(){
if(attrs.id
浏览 2提问于2017-06-03得票数 0
回答已采纳
尝试一个简单的TypeScript应用程序，但当试图将Angularjs集成到解决方案中时，无法通过主题中指出的错误。基本上，我有一个简单的index.html页面，如下所示：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href=
浏览 5提问于2015-02-21得票数 0
我开始学习Angular.js，我想知道如何按照这个(伪代码)的思路来做一些事情：
<li ng-repeat="item in items">
<# if(item.dataType == "string") { #>
<input type="text" />
<# } else if(...) { #>
<input type="password" />
<# } #>
</li>
我知
浏览 2提问于2014-07-07得票数 3
回答已采纳
1回答
我正在努力学习AngularJS，我有一个问题/概念，我很难理解。
以我创建的以下演示代码为例：
js
var app = angular.module('customerPortalApp', ["ui.router"]);
app.config( function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1");
$
浏览 4提问于2013-11-22得票数 0
回答已采纳
我有一个angularJS函数，它返回一个值，并希望在javascript中创建一个if语句。我试过以下几种方法，但到目前为止还没有成功。
AngularJS:
$scope.orderTotal = function(index) {
var orderTotal = 0;
angular.forEach($localStorage.items, function(items) {
orderTotal += items.quantity;
浏览 1提问于2016-02-25得票数 1
我想构建一个带有异步API的模式指令来打开模式。我正在考虑的是一个工厂，它返回给我操作modal指令的API对象。使用Angular-UI Bootstrap 0.6.0，我希望是这样的：
Module.factory("ModalAPI", function ($modal)
var ModalAPI;
ModalAPI.confirm = function (title, text, buttons) {
// Set up a confirmation modal
return $modal.open(options).
浏览 1提问于2013-09-19得票数 1
我想知道，Angular团队是否计划为ngfor添加一个数字或变量？这对于开发来说将是非常舒适的。
目前，我们必须创建一个伪表
fakeArray = new Array(12);，然后是<li *ngFor="let a of fakeArray"></li>
感谢你的社区。
浏览 7提问于2018-01-16得票数 1
回答已采纳
我有一个angular指令来简化在运行时添加bootstrap类，以简化应用"form-group“、"control-label”和"form-control“的需要。只要我不试图一次包含多个级别，这就很好地工作，这意味着我似乎不能让这项工作在"form-group“中包含多个div。我已经附加了代码、原始HTML和处理过的HTML供审查，看看是否有人可能对我如何修改这个工具有一些见解。
指令：
(function () {
"use strict";
angular.module("ppac")
浏览 0提问于2017-06-28得票数 0
5回答
在angular2中消失时，我编写了自己的过滤器管道：
import {Pipe, PipeTransform} from 'angular2/core';
@Pipe({
name: 'myFilter'
})
export class MyFilter implements PipeTransform {
transform(customerData: Array<Object>, args: any[]) {
if (customerData == undefined) {
return;
}
va
浏览 7提问于2016-02-01得票数 30
回答已采纳
我是Angular的新手，也没有太多使用css3的经验(我是后端开发人员！)
我正在尝试理解angular如何使用css3关键帧管理自定义过渡。
我得到了这个：
在我的标记中：
<div id="welcome-container" ng-hide="test">
...
</div>
在我的控制器中：
$scope.test = false;
// ... doing some things that takes more than 3-4 seconds
$scope.test = true;
在我的CSS中：
#welcome-co
浏览 0提问于2014-01-16得票数 0
当我使用angular.component()或angular.directive()创建自定义元素时，这是否被视为？
也就是说，在内部生成单个header和footer在语义和语法上是合适的，还是作为包含元素树的一部分？
例如，如果我有
angular.component('foo', {
template: `<header>Yay</header>`
})
我使用它，所以生成的html是
<section>
<foo>
<header>Yay</header>
</f
浏览 6提问于2016-11-04得票数 1
回答已采纳
我正在寻求一些建议，在使用Angular2时应该如何处理元素。我已经在本地存储中存储了一些元素id，并希望在某些特定元素上设置一个选定的类名。
现在我用的方法是：
ngAfterViewChecked() {
// Check if seats has been selected before
var selectedSeats: elementInterface = JSON.parse(localStorage.getItem('SelectedSeats'));
if (selectedSeats != null) {
var outboundElement =
浏览 3提问于2017-01-26得票数 0
回答已采纳
我几周前才开始使用Angular 2，在这里我有点卡住了，所以我可能需要一些帮助。事情是这样的，我想在Ionic 2中创建可重用的自定义组件。例如，如果我决定创建一个不同大小的自定义按钮。
<btn-custom sm-size rounded> </btn-custom>
sm-size和rounded会将特定的CSS代码注入到我的组件中。我认为它们是属性指令，但我仍然不知道如何操作它。有人能帮我理解一下吗？
浏览 9提问于2017-01-28得票数 1
回答已采纳
我是Angular JS的新手。
你们谁能举例说明一下Angular JS中ngBind，ngBindHtm和ngBindTemplate的区别？
浏览 2提问于2014-01-13得票数 23
回答已采纳
我正在使用Qunit框架为ng-grid编写单元测试。下面是我的实现：
module("Test grid angular", {
setup: function(){
injectorGrid = angular.injector(["ng", "ngGrid"]);
$scope = injectorGrid.get('$rootScope').$new();
$scope.currentPortfolioList = [
{
'sym
浏览 0提问于2014-05-07得票数 0
对AngularJS中的指令限制有很好的解释。自定义指令可以定义如下：
angular.module("app", []).directive("blah", function () {
return {
restrict: "A",
template: "blah directive. nothing to see here."
};
});
这将创建一个我称之为属性指令(由于restrict: "A")来问这个问题。这实际上是，这个指令可以使用如下所示：
<
浏览 7提问于2013-05-08得票数 1
回答已采纳
我试图通过指令获取nativeElement。这是我的指示：
import { Directive, ElementRef } from "@angular/core";
...
@Directive({
selector: '[someData]',
exportAs: 'someData'
})
export class MyDirective {
constructor(private elRef: ElementRef) {
}
}
我的模板如下所示：
<div *ngFor="let
浏览 3提问于2017-10-27得票数 1
回答已采纳
我正在尝试使用jQuery.matchHeight将元素设置为相同的高度。我从Angular指令调用函数
angular.module('myApp')
.directive('matchHeight', ['$timeout', function ($timeout) {
var linkFunction = function(scope, element) {
$timeout(function() {
angular.element(element).matchHeight();
});
浏览 5提问于2016-10-20得票数 0
3回答
我最近用AngularJs做了一个网站。我还处于学习阶段。我希望在页面上的元素到达顶部后将其修复。我尝试过各种Javascript和Jquery函数。然而，它们似乎不起作用。
我也尝试过使用Angular ui的ui-scrollfix，但同样不起作用。
我正在分享我的代码。这是一个不完整的页面。请告诉我达到上述效果的方法。
<div class="row pdiv">
<div class="col-md-8 pdiv col-md-offset-2">
<h3><b>About Us
浏览 0提问于2014-11-30得票数 21
回答已采纳
1回答
假设我有一个这样的元素：
<elemental></elemental>
我可以通过运行以下命令来拉取作用域：
angular.element($('elemental')).scope()
在以类似的方式从DOM中编译元素后，是否可以获得元素的源模板？
浏览 0提问于2013-06-06得票数 1
回答已采纳
这是我的html页面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="scoping_direct
浏览 2提问于2014-10-27得票数 1
回答已采纳
6回答
我在角度上对$index有异议，我有一个ng-重复，在里面我使用$index来跟踪独特的类。这是我的代码：
<div ng-repeat="style in styleArr">
<div class="myclass{{ $index }}">
</div>
</div>
在角控制器中，我在myclass0中附加了一个div，但没有工作。这是我的控制器。
myClass = angular.element('.myclass0');
myClass.
浏览 3提问于2015-10-08得票数 1
回答已采纳
2回答
在角1.x中，当使用ng-controller时，可以通过检查元素并调用angular.element($0).controller()从浏览器控制台访问控制器实例。
这不适用于声明为：
angular.module('foo').component('bar', {
controller: class {
}
});
还有其他方法从控制台访问组件的控制器实例吗？
浏览 5提问于2016-09-13得票数 2
回答已采纳
1回答
例如，我有这样的HTML页面：
<body ng-app="MyApp">
<standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}">
浏览 1提问于2013-02-21得票数 0
回答已采纳
我有几个div，如果一个div被点击，我想通过改变div的背景颜色以及div中的文本来突出显示div(即激活它)。在使用JQuery之前，我已经通过在我的css中定义了一个类，并动态地删除和添加了这个类来做到这一点。如何在Angular2中实现这一点。我不应该操作DOM，因为这在angular2中是不允许的。我已经在网上寻找了几个例子，但都没有成功。请
浏览 1提问于2016-08-17得票数 0
嗨，我正在尝试让下拉指令从UI引导程序开始工作。每当我尝试使用“下拉”指令时，都会收到以下错误消息：
控制台错误消息：
Multiple directives [dropdown, dropdown] asking for 'dropdown' controller on: <li class="dropdown pos-stc" dropdown="">
http://errors.angularjs.org/1.3.9/$compile/multidir?p0=dropdown&p1=dropdown&p2=
浏览 3提问于2015-01-17得票数 4
回答已采纳
1回答
在角样板中使用此回购
但我发现很难访问角component的$postLink相位中的dom。
我编码错了吗？还是我必须使用不适合单向绑定的指令？
about.component.js
import template from './about.html';
import controller from './about.controller';
import './about.scss';
let aboutComponent = {
restrict: 'E',
bindings: {},
template,
浏览 2提问于2017-04-25得票数 2
回答已采纳
2回答
我已经看到、、、对这个问题提出了疑问，但出于某种原因，我仍然不能将指令中的ng-click绑定到父控制器上的方法。我非常肯定，我的范围隔离和方法参数传递正确，但到目前为止没有任何进展。我的JS的总体简化(这个应用程序很大)如下所示：
angular.module('myApp', []);
angular.module('myApp').directive('myCustomDirective', customDirective);
function customDirective() {
return {
restrict: &
浏览 4提问于2016-02-18得票数 2
回答已采纳
2回答
下面是关于属性指令的角文档的指令示例
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
就在下面，他们用下面的文字来解释它
浏览 1提问于2017-09-06得票数 1
回答已采纳
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
2回答
在下面的代码片段中，我想问一下，如果编译阶段对于指令的所有实例只运行一次，那么为什么我看到console.log(" compile ")运行了5次？它应该只运行一次吗？难到不是么？
//module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Joseph";
});
//app declaratio
浏览 0提问于2016-12-13得票数 0
我正在创建一个简单的Angular应用程序，它使用Ace编辑器(通过ui-ace)进行屏幕上的文本编辑。我想要一个在光标改变时运行的处理程序，它将在光标位于某个位置时更新模型对象。但是，我还希望能够单击按钮将光标移动到特定位置(如果需要，还可以更新模型对象)。这里有一个jsfiddle演示了这个想法。
当光标放置在第二行上单词print的末尾时，模型对象将更新。问题是，当按下Move Cursor!按钮时，第30行上的$scope.$apply()将抛出一个正在进行的错误。但是，如果没有这一行，当使用箭头键移动光标时，绑定到模型对象的视图将不会更新。
我目前的理解是，这是做这类事情的错误方法
浏览 1提问于2015-09-23得票数 0
我对我能找到的并不满意。我只想要一个简单的例子，一个菜单系统在Angularjs与悬停效应和选择效果。
我知道“悬停”效果可以在CSS中实现，但这对我来说是一个更好地理解angularjs的练习。
我想做的是非常基本的事情。
基本上，我有一些HTML，它有一些DIVs (或菜单项)：
<div NavCtrl id="header">
<div class="item" ng-click="click(1)" ng-mouseenter="hoverIn()" ng-mouseleave="hov
浏览 4提问于2016-05-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
