在Angular指令上指定主体元素类型
在Angular中，指令是一种用于扩展HTML元素的特殊属性。指令可以用于在DOM元素上添加行为、样式或其他功能。在指令中，可以通过指定主体元素类型来限制指令可以应用于的HTML元素类型。
指定主体元素类型可以通过在指令定义中使用restrict属性来实现。restrict属性可以接受以下几个值：
'A'：表示指令可以作为属性使用。这是默认值，如果不指定restrict属性，指令将默认为属性指令。'E'：表示指令可以作为元素使用。这意味着指令可以作为独立的HTML元素存在。'C'：表示指令可以作为类名使用。这意味着指令可以通过添加类名的方式应用于HTML元素。'M'：表示指令可以作为注释使用。这意味着指令可以通过注释的方式应用于HTML元素。
可以通过组合这些值来指定多个主体元素类型。例如，restrict: 'AEC'表示指令可以作为属性、元素和类名使用。
指定主体元素类型可以帮助开发人员更好地控制指令的使用方式，使其更加灵活和可复用。根据具体的应用场景和需求，可以选择适当的主体元素类型来定义指令。
以下是一个示例指令定义，指定了主体元素类型为元素：
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// 指令逻辑
}
};
});在上述示例中，restrict: 'E'指定了指令可以作为元素使用。可以通过<my-directive></my-directive>的方式在HTML中应用该指令。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
相关·内容
1回答
这就是我得到的(由于: Error：$injector/nomod?p0= store )无法实例化模块存储的结果。
(一个描述性较强的错误)
模块“商店”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数.。
我做了所有正确的事情--在angular.js文件之前加载app.js文件，我一直在搜索相同的问题，但仍然找不到主要问题所在。
index.html
<!DOCTYPE html>
<html>
<head ng-app='store'>
<!-- CSS -->
<link
浏览 2提问于2015-01-16得票数 1
回答已采纳
2回答
我正在尝试添加一些自定义的angular指令，以便在几个视图上调用。也就是说，下面是我如何设置代码的
app.js
angular
.module('app', [
'app.routes',
'app.config',
'app.users',
'app.plans'
]);
usersCtrl.js
angular
.module('app.users.controllers')
.controlle
浏览 2提问于2017-05-18得票数 1
1回答
我的控制台中有以下错误：
错误:指令“searchTerm”要求的$compile:ctreq控制器“游戏列表”无法找到！
下面是我正在使用的代码：
游戏列表：
<div class = "bit-75-percent games-list" data-ng-controller = "GamesController">
<ng-include src = "'../templates/simpleSearch.tpl.html'"></ng-include>
<d
浏览 1提问于2014-06-29得票数 0
1回答
下面的指令应该隐藏一个元素。
import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
import {el} from "@angular/platform-browser/testing/src/browser_util";
// Directive decorator
@Directive({ selector: '[hide-me]' })
// Directive class
export class MyHiddenDirective {
// @
浏览 1提问于2017-06-29得票数 9
回答已采纳
我现在正在学习Angular.js和Require.js。当我同时使用这两者时，我在这里遇到了一个问题。例如，在我的html中，我有一些非常简单的东西，比如{{3+3}}。我发现这只会在所有东西加载后的几秒钟内被评估为6秒。用户可以清楚地看到整个过程。但这对我不好。我不想在这里拖延。有人能解释一下为什么会发生这种情况吗？这是因为我正在执行手动引导吗？
这是我的require和引导程序代码的main.js。
require.config({
paths: {
jquery: 'lib/jquery/jquery-1.9.1.min',
bootstrap: &
浏览 0提问于2013-05-20得票数 6
回答已采纳
我是AngularJs的新手，在测试带有依赖项的指令时遇到了问题(尽管指令本身工作正常)。我在这里或其他资源上找不到任何答案。
下面是我的代码：
指令：
angular.module('MyApp')
.directive('appVersion', ['config', function (config) {
return function (scope, elm) {
elm.text(config.version);
};
}]);
服务(值)：
angular.module('MyApp'
浏览 0提问于2013-07-11得票数 6
回答已采纳
我有一个指令，在您滚动传递页面的一部分后，该指令目前正在更改HTML类元素。从本质上讲，我只是从互联网上找到的代码进行了黑客攻击，我很难理解它的工作原理和原理。我知道，如果我能更好地理解它，我可以尝试为我的项目中更有意义的方面重新创建它。如果有人能给我任何见解我会很感激的。以下是角部分：
myApp.directive('changeClassOnScroll', function ($window) {
return {
restrict: 'A', // What does this line do?
scope: {
o
浏览 5提问于2018-01-04得票数 1
回答已采纳
1回答
嵌套复杂指令不被执行？
、、、
我试图遵循 by ，在这里，他通过将指令分类为组件和容器来解释指令。
因此，我尝试这样做，有一个容器(幻灯片)将容纳不同的项目(文本区域，图像，视频.)但我的例子更有活力。
他的例子是这样的：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
但我的更像这样：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
浏览 3提问于2013-04-24得票数 0
回答已采纳
我正在与AngularJS作斗争，任何帮助都将不胜感激。问题是-我在div上有一个按钮，当点击它时，应该会在应用程序的整个主体中添加一个css类。有可能吗？谷歌一下建议我们可以将css类添加到有问题的元素中。
详述：
我有一个显示表单的主页。它有一个图标列表，当点击时，应该会弹出一个页面，显示项目的详细信息，它应该会将我的主页移到左侧，以便为详细信息页面腾出空间。
<ul data-ng-controller="myctrl">
<li data-ng-click="showMe(0)">Item 1</li&
浏览 0提问于2013-12-06得票数 0
我正在使用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
我正在尝试为指令编写测试，所以我使用$compile手动构建它。(是的，我知道我可以使用e2e测试，但在本例中，我想测试一些独立于DOM的逻辑，所以我使用单元测试方法。)
我有一个用scope: {foo: '='}绑定到的字段。当我试图在指令的作用域上设置它时，我得到了以下错误：
Error: Non-assignable model expression: undefined (directive: foo)
at Error (<anonymous>)
at $get.parentSet (https://ajax.googleapis.com
浏览 0提问于2012-11-28得票数 16
回答已采纳
我使用的是来自Tooltip的Angular Material，工具提示在iOS (Safari)上没有正确显示。这是我经历的行为：
iPhone与iOS 12:长点击按钮显示工具提示，但也执行click事件
iPad与iOS 13:在长抽头上完全没有工具提示
iPhone with iOS 14:工具提示显示在长点击上，但弹出菜单(剪切、复制、粘贴、.)显示并选择下面的文本。
在Android系统上，一切都如期而至。在我看来，matTooltip实际上根本没有在iOS上工作。这是我的设计：
角CLI: 8.3.29
角度: 8.2.14
@角/cdk 8.2.3
@角/材
浏览 7提问于2021-03-25得票数 1
在哪里可以找到完整的Angular结构指令列表？我知道这些：
*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
*ngSwitch
*ngTemplateOutput
还有其他的吗？我想一定有一个完整的列表，但到目前为止，我还没有找到它。
浏览 5提问于2020-08-05得票数 0
1回答
我正在尝试制作一个带有角度指令的暗示式ajax搜索框。我仍然开始匹配数据，下面是我所拥有的：
function hintSearch () {
return {
restrict: 'E',
replace: true,
template: '<div class="search_hint"><label><input type="search" ng-change="query()"></label><ul cl
浏览 4提问于2016-04-20得票数 1
回答已采纳
我有以下控制器和指令声明。
<div ng-controller="DocumentController as dc" data-drop-zone url="api/document/upload">
如何连接文档控制器以调用指令上的方法。
<button ng-click="dc.start()" />
drop区域是类型记录，定义如下。
export class DocumentDropZone implements ng.IDirective {
url: string;
constructor(
浏览 3提问于2016-07-25得票数 0
回答已采纳
在过去的3-4天里，我一直在研究Angular js。从外观上看(包括教程和视频)，对于use.But来说，当我真正开始用Angular js替换当前的web应用程序代码时，我在启动时遇到了很多问题。
例如，如果在某个事件中，我希望将一些超文本标记语言添加到DOM中某个已经存在的元素中，那么通过传统的jQuery方法，我将简单地获取该元素并添加超文本标记语言。我不能理解如何用Angular做同样的事情，因为在Angular controller.So中不建议使用DOM操作，如何访问我应该扩展的元素。
另一个例子是当我必须在某个时刻重置表单元素时。我再次面临在角度控制器中使用jQuery样式的元
浏览 1提问于2012-11-24得票数 2
回答已采纳
1回答
我决定是时候探索测试指令的隐藏方面了，现在当我使用具有独立作用域的指令做一些事情时：
parentScope = $rootScope.$new()
parentScope.dasDingy = "bla bla dingy"
element = angular.element("<foo dingy='dasDingy'></foo>")
$compile(element)(parentScope)
$rootScope.$digest()
scope = angular.element(element).scope(
浏览 4提问于2014-07-03得票数 3
回答已采纳
我是Angular JS的新手。
你们谁能举例说明一下Angular JS中ngBind，ngBindHtm和ngBindTemplate的区别？
浏览 2提问于2014-01-13得票数 23
回答已采纳
2回答
我不明白这两个@指令和指令之间的区别:在下面的例子中是HeroAppMainComponent
@Component({
selector: 'hero-app',
template: `
<h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }'],
directives: [
浏览 0提问于2016-05-18得票数 3
2回答
你好，我有一个简单的登录页面，这是很好的工作，当我使用引导，但我想使用角材料设计。
我在找3到4小时的问题，什么都没有。我认为该表单不发送任何数据，如用户名、密码和提交
有完整的登录代码
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-s
浏览 4提问于2017-02-19得票数 0
回答已采纳
我试图在localhost:4200上发布来自Angular4的数据到localhost上的API :8000。我和邮差合作得很好，但不擅长棱角分明。然后我得到：
加载资源失败:服务器响应状态为422 (不可处理实体)
这是发布到api的服务：
@Injectable()
export class ApiService {
constructor(private http: Http) { }
login(username: string, password: string): Observable<Response>{
const url =
浏览 0提问于2017-09-20得票数 4
为什么Angular JS Route需要你引用一个控制器？
难道你不能只引用一个视图，然后让view指令链接到控制器吗？
浏览 0提问于2014-02-24得票数 1
我有用户名单。我希望当光标在按钮上悬停时，它将*ngIf设置为true，然后显示有关用户的信息(当光标离开按钮时显示为false )。
user-list.html**:**
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
user-list
浏览 4提问于2017-03-31得票数 1
1回答
当我使用angular的自定义指令时，html页面的w3验证失败。帮我解决这个问题。
例如：
<div>
<share-news news-title="{{...}}" news-content="{{...}}"></share-news>
</div>
当我使用上述代码时，
我得到了类似元素分享的错误--在这个上下文中，不允许作为元素div的子元素。(禁止此子树中的更多错误。)
浏览 0提问于2015-12-11得票数 0
1回答
有
var app = angular.module( 'myApp', [] );.....
我需要找出列表项目的数量，它正在编辑中，或者根据我的需要被它操纵。
怎么做？
浏览 2提问于2014-02-07得票数 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
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
回答已采纳
我对JS，Angular.js和node.js非常陌生。我正在尝试做登录注册项目，我有一个小问题。
这是我的密码：
login.ctrl.js:
var app = angular.module('login-register', []);
app.factory('UserLog', ['$http', function ($http) {
return {
loginUser: function (user, callback) {
$http.get('/user', use
浏览 2提问于2016-07-03得票数 0
回答已采纳
我正在学习angular，遇到了视图孩子和内容孩子。这些是angular中的查询列表对象。在生命周期钩子期间，angular更新查询列表。查询列表对象存储视图节点。这一切都是理论上的，我想问一下，更新查询列表或进行查询是什么意思？什么是查询列表中的查询？
浏览 131提问于2019-12-14得票数 2
1回答
我正在学习Thinkster的指令，当我实际加载index.html并在控制台中“说点什么”时：
“你好”，“嗨”，“你好”--
我期待着" hello“、"howdy”、“hi”--假设指令从左到右得到评估，那么首先hello被推入$scope.words，然后是howdy，然后是hi，但这显然不是这里发生的事情，在引擎盖下面到底发生了什么？
角码：
(function() {
'use strict';
angular.module('greetings', [])
.directive("welcome", func
浏览 1提问于2016-01-18得票数 3
回答已采纳
我在angular.js ..I中做了一个弹出屏幕，用google .But做这个，我有问题。
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
</div>
</div>
app.directive('innerHtmlBind', function() {
aler
浏览 3提问于2014-07-28得票数 0
回答已采纳
我在角指令上工作了一段时间，现在，我遇到了一个问题。
module.controller和可以在指令中定义的controller之间有什么不同？
angular.module().controller()
angular.module().directive(function(){
return {
controller:
}
});
两者的定义似乎是一样的。
另一个问题是，我会为指令控制器分配由angular.module().controller()定义的控制器吗？
浏览 0提问于2014-12-27得票数 1
回答已采纳
我最近把我的Angular应用从v9升级到了v10。 我注意到不再支持未修饰的类。请参阅here 因此，在ng upgrade期间，我没有修饰的抽象组件已被更改为具有@Directive()修饰错误。 例如 export abstract class AbstractFormControl implements ControlValueAccessor { ... } 已更改为 @Directive()
export abstract class AbstractFormControl implements ControlValueAccessor { ... } 为什么Angular使用@
浏览 41提问于2020-09-01得票数 5
2回答
在这个angular指令中，^在require下表示什么？我找到了这个片段，并试图弄清楚它在说什么。
.directive('accordionGroupHeading', function() {
return {
restrict: 'EA',
transclude: true,
template: '',
replace: true,
require: '^accordingGroup',
link: f
浏览 0提问于2016-07-13得票数 0
我试图创建一个自定义指令，在我的指令模板中，我包含了一个角引导程序库的指令。在这种情况下，是一个popover指令。当我运行我的应用程序时，会出现以下错误：
错误：$compile:multidir多指令栏，在以下栏上询问模板-默认进度-条“ng-类=”类型&&‘role=-+类型“导航>progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width:>%+ '%
浏览 1提问于2014-09-23得票数 4
1回答
我可以使用angular ui指令作为属性或类而不是元素吗？
例如：
<ul class="accordion">
<li class="accordion-group">
my content
</li>
</ul>
浏览 4提问于2014-07-17得票数 0
我是Angular的新手，正在尝试了解如何动态创建新元素。我有一个名为“窗格”的元素指令，它用一个模板替换了窗格标签。
<pane ng-controller="AreaCtrl"></pane>
窗格模板(压缩)：
<div>
<section></section>
<div class="subs"></div>
</div>
当我在区段标记内单击一个项目时，如果所单击项目的“class=”还不存在，我想在div中追加另一个带有“subs”的“窗格
浏览 2提问于2013-05-03得票数 0
我正在创建一个角服务，它将向DOM附加一个简单的通知框并显示它，而不必添加HTML代码并编写逻辑来隐藏和显示它。
该服务称为$notify，如下所示：
$notify.error( "this is an error", {position: "bottom-left"} );
该服务将使用angular.element构建通知框并将其添加到DOM中。所有这些都很好。但是，我也在使用ngAnimate和animate.css让通知顺利地在屏幕上显示，并在关闭时滑出。如果我简单地将通知HTML代码粘贴到我的页面中，但是当代码通过服务动态添加时，我已经验证了动画是否
浏览 2提问于2014-01-24得票数 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
回答已采纳
2回答
我应该如何加载mvc局部视图并保持Angular JS工作。在我渲染布局后，Angular JS工作得很好，但是如果我在布局中加载部分视图，Angular JS在部分视图中不再工作。我猜想在我将HTML注入DOM之后，Angular引擎没有编译ng指令。
浏览 1提问于2015-05-08得票数 4
回答已采纳
1回答
单元测试指令方法不存在
、、、、
我正在尝试测试一条指令：
define(['require'], function (require){
'use strict';
var myDirective = function ($rootScope, MyService) {
return {
restrict: 'E',
templateUrl: 'app/banner/banner.html',
scope: {},
controller: [ '$scope', '
浏览 0提问于2016-03-01得票数 0
1回答
在我的应用程序中，有一个点是动态地创建一个指令，该指令具有我想要附加到容器(div)中的被屏蔽的内容。我在我做过的几个组件中使用了这种方法，它运行得很好。但现在我有一个问题，因为这个指令已经排除了内容。我收到这样一个错误：
angular.js:14199错误:指令“compB”要求的$compile:ctreq控制器'compA‘无法找到！
如能提供任何帮助，将不胜感激。
这是创建组件并将其添加到容器的代码。
var newScope = $rootScope.$new(true);
newScope.elementConfig = elementConfiguration;
浏览 1提问于2019-02-10得票数 0
1回答
当我用角1.5.3编码的时候。这是代码：
app.js
var testApp = angular.module('test-app', ['plugin.template']);
testApp.run(function ($rootScope) {
});
createDirective('directiveOne');
createDirective('directiveTwo');
createDirective('directiveThree');
function createDirective
浏览 2提问于2017-08-17得票数 0
回答已采纳
1回答
参见下面附加到<title>标记的超级简单的指令。在现代浏览器中，这会激活标题并将标题更改为“标题C”，但在IE8中，从不调用链接函数，标题仍为“标题B”。
Angular中的<title>标签以跨浏览器的方式支持指令属性吗？我有其他的变通方法来更新title值，但我正在寻找一些明确的东西来说明Angular是否支持它，或者为什么不支持它。
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
浏览 0提问于2014-10-08得票数 2
3回答
我试图用angularjs使用指令来操纵我的表。
我想在第一个td中添加一个新类，id=2如下所示：
gameApp.directive('mapActivity', function() {
return {
link: function(scope, element, attrs) {
angular.element('.click#1').addClass('dotted');
}
};
});
我试图在这里“使用”这个愚蠢的词：
<map-activity>
浏览 2提问于2014-08-18得票数 1
回答已采纳
我在关于指令的官方文档中找到了一个示例，它适合我创建Tab元素。网址是：在“创建通信指令”部分。它是关于"Tab“界面的。不过，我需要对它做一些小小的修改。
基本上我需要两种类型的"Tab“。第一种方法就像示例一样，我将tabType定义为tab，第二，我只需要没有窗格的选项卡头，然后将tabType定义为url。将tabType定义为url的页面应该在单击该页面时具有指向另一个页面的链接。
我现在要做的就是在选项卡头指令范围中放置一个名为tabType的变量/参数，以区分我想要的两种类型。并将ng-if放在窗格包装器的模板上，使其仅在tabType为tab时可用。下面是我所做
浏览 0提问于2016-06-09得票数 0
为什么replace=true或replace=false在下面的代码中没有任何影响？
为什么在replace=false时没有显示“一些现有的内容”？
或者更谦虚地说，您能解释一下指令中的replace=true/false特性是什么以及如何使用它吗？
示例
JS/Angular：
<script>
angular.module('scopes', [])
.controller('Ctrl', function($scope) {
$scope.title = "hello
浏览 32提问于2014-03-19得票数 94
回答已采纳
我正在尝试使用一个叫做的工具提示插件。我使用了角和browserify作为我的依赖管理器。
除了这个插件，我什么都做得很好。每件小事在褐变过程中都会变得更加困难，但这件事似乎正在变成一场噩梦。
我跟踪了tipso的文档，这非常简单。但是当我运行这个应用程序时，我总是收到一条错误消息，上面写着铬控制台中的Uncaught TypeError: $(...).tipso is not a function。
这是我的broserify-shim配置
"browserify-shim": {
"jquery": "$",
"b
浏览 4提问于2016-04-29得票数 1
回答已采纳
2回答
按照我的代码，我的html中的表达式{{heading + message}}应该呈现为Message:。
当我输入值并单击按钮时，它确实呈现了变量heading和message的值。
因此，预期的功能是有效的。
但问题在于表达式应该呈现为Message:而不是expression本身(如{{heading + message}} )的初始加载。
我正在通过http://localhost:8080/examples/first.html访问页面，我已经尝试了safari和chrome。
问题的性质：
表达式呈现为：{{heading + message}} ，在第一次加载时进行几秒钟
浏览 4提问于2015-07-09得票数 0
回答已采纳
我正在尝试将集成到我的AngularJS项目中。
我有一个只使用jQuery、jQuery和jQuery布局插件构建的工作版本。
现在，我希望在AngularJS中有同样的东西。
在将默认值传递给插件的嵌套实例时，我遇到了特别的困难。
一个简单的例子如下所示：
HTML:
<body ng-app="myApp">
<div id="outer-container" layout-container>
<div class="ui-layout-west pane">WEST</d
浏览 4提问于2013-11-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
