为什么我不能在angularjs中的双向绑定指令组件中使用相同的名称？
在AngularJS中的双向绑定指令组件中不能使用相同的名称，这是因为在AngularJS中，指令是通过名称来识别和调用的。如果在同一个模块中使用相同的名称，会导致名称冲突，从而引发错误或不可预测的行为。
具体来说，当在AngularJS中定义一个指令时，需要给指令起一个唯一的名称。这个名称在整个应用程序中必须是唯一的，包括指令的自定义标签名、指令的属性名、指令的类名等。如果使用相同的名称，AngularJS将无法区分它们，并且可能会导致指令的重复定义或覆盖。
为了避免这种冲突，可以采取以下几种方式：
- 使用独特的名称：确保每个指令都有一个唯一的名称，可以在指令的定义中使用前缀或命名空间来确保唯一性。
- 使用驼峰命名法：按照AngularJS的命名规范，建议使用驼峰命名法来定义指令的名称，这样可以增加可读性并减少冲突的可能性。
- 使用指令的属性名或类名：如果在指令的定义中使用属性名或类名作为指令的名称，可以避免与其他指令的名称冲突。
总之，为了避免在AngularJS中的双向绑定指令组件中使用相同的名称导致的冲突和错误，我们需要确保每个指令都有一个唯一的名称，并且遵循AngularJS的命名规范。这样可以保证指令的正确定义和使用。
相关·内容
在AngularJS指令中有以下AngularJS函数：
link: function(scope, iElement, iAttrs) {
scope.$watch('name', function(newVal){
if(newVal){
console.log(newVal);
}
}, true);
}
完整的小提琴位于这里：
我试图找出为什么当用户更改textarea中的$watch变量时不会调用name函数。
浏览 3提问于2014-02-21得票数 0
回答已采纳
3回答
我一直在阅读AngularJS文档，发现了一些我仍然不明白的东西：
对于属性名称与要绑定到的指令范围内的值相同的情况，可以使用以下速记语法：
...
scope: {
// same as '=customer'
customer: '='
},
...
查看最后一个示例(my/My-窗格)，代码如下：
.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transcl
浏览 5提问于2014-09-16得票数 0
回答已采纳
我看到以下情况：
// my-directive.js
return {
require: 'ngModel',
scope: {
ngModel: '=',
},
controller: controller,
link: myLink
};
// my-link.js
return function(scope, $element, attrs, modelController) {
scope.onMyClick = function(event) {
modelController.$setViewVal
浏览 2提问于2016-06-29得票数 2
回答已采纳
1回答
我已经尝试创建一个与进度条相对应的AngularJS组件。下面是为这个问题创建的JSFiddle，
下面是我的应用程序和组件定义：
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', function($scope) {
$scope.total = 20;
$scope.count = 15;
$scope.changeTotal = function(value){$scope.total += value};
$scope.
浏览 1提问于2016-07-11得票数 0
回答已采纳
我正在尝试构建一个可重用的指令，该指令在单击按钮时显示一个对话框，并允许用户自定义字符串数组。我在一个单一用例场景中工作得很好，但是我想知道是否可以通过代码创建双向数据绑定，这样我就可以对不同的字符串数组多次使用该指令的单个实例。
在我的HTML中，我有一个指令(注意没有绑定到特定的数组)：
<my-array-dialog control='arrayDialog'></my-array-dialog>
我公开了一个共享控件对象，该对象上有一个showDialog方法，用于显示对话框。该模式的一个示例是：
我想要做的是与父控制器进行双向数据绑定，将数据
浏览 2提问于2014-01-22得票数 0
1回答
请参考。问题:当我在主控制器中使用item-over指令时，它会触发fine OnOver。这样可以正常工作：
<a href="#" ng-repeat="item in main.Data" item-over="main.OnOver(item)">{{item.Name}}</a>
但是当我把它放在list-view指令中时，它不会触发控制器的OnOver方法。这不起作用：
<list-view itemssource="main.Data">
<a href="
浏览 19提问于2017-12-30得票数 0
回答已采纳
我仔细阅读了关于这个主题的AngularJS文档，然后摆弄了一个指令。这是。
下面是一些相关的代码片段：
HTML{{text}}From 指令中的窗格：
作用域：{ biTitle：'='，标题：'@'，bar：'=‘}，
有几件事我不明白：
为什么我必须在'@'中使用"{{title}}"，在'='Can中使用"title"我也可以直接访问父作用域，而不用用attribute?The修饰我的元素文档说“通常希望通过表达式将数据从隔离作用域传递到父作用域”，但这似乎也适用于双向绑定。为什么
浏览 52提问于2012-12-27得票数 1095
回答已采纳
3回答
孤立作用域绑定类型
、、、、
根据，范围绑定可以分为3种类型
=、@和&
和
根据，范围绑定可以分为4种类型
<，=，@，&
即使在大多数在线文章中，孤立的范围绑定也只给出了3种类型。
哪个是对的？
浏览 4提问于2017-04-25得票数 3
我是Angularjs的新手，我有一个应用程序，有一些“项目”，其中有一个本地菜单显示在一些页面上。Index.html包含带页脚的主导航条：
<body ng-app="ysi-app" ng-controller="MainController">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="sidebar co
浏览 0提问于2016-11-13得票数 1
回答已采纳
AngularJS似乎有一个新的绑定符号：<。文档中提到了组件的<，但对于指令并不十分清楚。
所以有两个问题：
<绑定适用于指令和组件吗？
何时使用<绑定？
浏览 2提问于2016-11-30得票数 1
回答已采纳
为什么在使用隔离作用域时包含/子元素不呈现。由于怀疑父程序还没有呈现，所以我尝试添加一个$timeout，但仍然没有成功。如果我通过注释删除单独的作用域
scope: {},
它起作用了。如何使其工作，在其中我需要独立的作用域和呈现包含的元素。
代码：
'use strict';
var app = angular.module('Directives', []);
app.controller('MainCtrl', function ($scope) {
$scope.data = [{id:1}, {id:2}, {id:3}]
浏览 0提问于2013-09-18得票数 1
回答已采纳
1回答
我是AngularJS的初学者，这里有一些HTML和JS代码：
有谁能帮我解释一下为什么ngModel.$modelValue在我的link函数中返回NaN
我找到了一些解决方案，并从scope.$eval(attrs.ngModel)中得到了模型值，但在我看来，这还远远不够完美.
请给我解释一下该怎么做。
浏览 1提问于2014-07-24得票数 3
回答已采纳
我对AngularJS相当陌生，几天前才开始使用它，所以如果问题本身是错误的，请原谅我。
我遇到的问题是，我想通过属性将一个URL参数传递给我的指令的独立作用域，但是在http://中的http://部分，它给了我一个错误，即Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://.
指令的HTML部分(我在其中“调用”它)如下所示：
<myDirective datasource="http://url"></myDirectiv
浏览 3提问于2015-02-07得票数 7
回答已采纳
1回答
好的，我正在尝试制作一个简单的聊天小部件指令，我希望它是在我的应用程序上的任何地方创建的动态，也就是说，我不想要硬编码的解决方案。因此，我希望从服务创建指令，从而通过服务助手方法设置其作用域变量。我想我在一些angularjs的材料指令中看到了这方面的一些例子，例如，我想做这样的事情：
$mdToast.simple()
.textContent('Marked as read')
.action('UNDO')
但是，相反，我的聊天小部件将类似于：
$chatWidget.setParent(parent).setUser(user).setMessa
浏览 4提问于2018-02-19得票数 0
回答已采纳
2回答
我有一堆电影，想想Netflix吧。每部电影都有许多标签分配给它:喜剧、恐怖等。
当我点击一个标签时，视图会相应地进行过滤，效果很好。但我还希望为所有的标签添加一个类，与点击的标签具有相同的名称(在每个其他电影上)。
我可以在点击事件中包含一个难看的jQuery：，但感觉不太对劲。
我是AJS新手，但我相信有更好的AJS方法来实现这一点？
(function () {
var directive = function () {
return {
restrict: 'A',
template: '<li data-ng-re
浏览 1提问于2014-11-04得票数 0
2回答
在angularjs中，什么是支持单向绑定的。ng-model是否支持双向绑定？ng-bind，{{ }}表达式是否支持单向绑定？
浏览 0提问于2015-12-21得票数 1
1回答
AngularJS指令传递字符串
、、、、
该指令试图创建一个称为进度条的HTML元素，用于在页面间移动时跟踪进度。我正在尝试将其开发为：<progress-bar progress='1' max='6' error="true"></progress-bar>
我只是尝试将信息从html中的^^元素传递给我的指令，并处理该信息以适当地更改进度条。
这对于接受整数值的"progress“和"max”是有效的，但由于某种原因，处理"error“(这是一个字符串)的注释掉的代码会导致问题。我是angularJS的新手，所以如果这一切听起来令人困
浏览 0提问于2014-01-09得票数 65
1回答
我正在从一本书中学习AngularJS，其中一个例子给了我一个带范围的指令。我决定和它一起玩，我遇到了一些不适合我的东西。4种作用域值中有3种可以使用，但1种不同。当我使用player: '=dataPlayer'时，屏幕上的值没有呈现，其余的都可以正常工作。我的假设是，data-是以角的形式保留的，但我在任何地方都找不到。有人知道为什么会这样吗？
<!--Html-->
<div ng-repeat="currentPlayer in players">
<!-- <my-player current-pla
浏览 4提问于2015-01-15得票数 1
回答已采纳
要将输入的值绑定到属性，我们使用ngModel指令。例如：
<input type='text' [(ngModel)]='model' />
为什么我们不能简单地对输入元素的value属性使用绑定呢？
<input type='text' [(value)]='model' />
浏览 3提问于2017-03-14得票数 4
回答已采纳
在过去的几天里，我一直在学习angularjs，特别是关于指令的。
我有一个场景，在这个场景中，我必须加载一个记录列表，其中每个记录都属于一个类别(下拉复选框中的5个类别)。我已经创建了一个指令来处理其中每一个的“更改”事件，并使其不重叠。正如您在控制台日志中看到的那样，每次从下拉列表中选择一个项时，它都是独立于其他项的。
我有两个问题：
如何只从外部资源加载类别一次。具体来说，我只想调用practiceFactory.getCategories()一次。
我的代码结构在角度上是正确的吗？
这是我的html：
<div data-ng-app="practiceA
浏览 0提问于2013-05-26得票数 0
回答已采纳
问题的简化版本，查看web开发控制台：
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations:
那么，为什么将对象传递到具有独立作用域的指令中会导致无限的$digest()循环呢？
// controller
// AngularJS 1.2.x infinite digest caused when returning object into directive
$scope.ctrlObjReturnFn =
浏览 0提问于2014-12-05得票数 2
请参阅示例
foodMeApp.directive('fmRating', function() {
return {
restrict: 'E',
scope: {
symbol: '@',
max: '@',
readonly: '@'
},
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
attrs.max =
浏览 1提问于2013-01-13得票数 47
回答已采纳
3回答
我刚刚开始学习Angular2，我想知道为什么开发人员决定在html中使用各种不同的包装器？例如：
[(ngModel)]="some.property"
(click)="someMethod()"
[src]="some.property"
我确信这背后有一个很好的逻辑原因，而且我知道它们被用于不同的目的，但乍一看，这似乎不一致，而且是一个不必要的障碍。
浏览 9提问于2016-12-05得票数 5
回答已采纳
我有点困惑，一些教程使用#来获取输入，而另一些则使用[(ngModel)]。两者之间的有效区别是什么？
浏览 1提问于2017-04-05得票数 18
回答已采纳
我有一个指令，我想应用于多个输入元素来改变它们的值。我已经成功地将它应用于输入元素的值，但由于某些原因，它没有反映在作用域中。我是Angular的新手，如果我错过了一些显而易见的答案，我深表歉意。 http://jsfiddle.net/hmko75td/ JS小提琴 <div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model='Factor'>
<option value=1>1</opti
浏览 23提问于2019-06-07得票数 0
回答已采纳
1回答
我正在实现在这里找到的angularJS滑块：
我让滑块正常工作，但现在需要从它们中提取值来执行一些简单的计算。
HTML：
<p>I'd like to borrow: {{calculate.amount}}</p>
<slider floor="100" ceiling="1000" precision="0" ng-model="calculate.amount" translate="currencyFormatting"></slider>
浏览 1提问于2014-05-28得票数 1
回答已采纳
下面是一个简单的角度JS示例的HTML和Javascript。在本例中，为什么链接函数不运行并将scope.flag设置为true (布尔值)而不是'true' (字符串)？
Javascript：
angular.module('truthyTypes', [])
.directive('myDirective', function(){
return {
template: '<div>flag value: {{ flag }}<br/>flag type: {{ flag | typ
浏览 2提问于2014-09-12得票数 0
回答已采纳
1回答
我正在通过视频angulaJS学习，这是很棒的，但我困惑从#46。例如，我们希望从json文件中获取一些国家的信息并显示出来，我们有一个指令定义：
countryApp.directive('country', function () {
return {
scope: {
country: '=country'
},
restrict: 'A',
templateUrl: 'country.html'
};
});
我们在一些
浏览 3提问于2015-10-03得票数 0
回答已采纳
1回答
我在这个链接上学习AngularJS指令：
当我到达最后一个关于：创建通信的指令的例子时
我确实找到了这一行(来自script.js)：
title: '@' // Line 33 at the script.js
问题是我不知道这一行是什么意思，我知道标题是一个孤立的作用域属性，但是@是什么，我了解到：
'=' is where the attribute name is the same as the value
'=info' where info is the attribute
但是上面链接中的文档并没有解释什么是@，我
浏览 2提问于2014-01-25得票数 0
回答已采纳
我在AngularJS是全新的，我正在学习一门课程。我对一个演示如何使用隔离作用域概念的示例有一些疑问。
因此，提供的示例是包含此app.js文件的单个页面应用程序，该文件包含所有应用程序逻辑：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
浏览 7提问于2015-11-15得票数 1
回答已采纳
1回答
指令、回调和作用域
、、、
我试图用angularjs来定义作用域，特别是在调用使用指令的模块上的回调时。我已经找到了3种不同的方法来完成同样的事情，我正在尝试了解每种方法的优缺点。
什么时候适合使用&、=或直接在父级上调用函数？
我更喜欢使用'=‘符号进行绑定，因为在指令和托管指令的模块中需要的代码较少，但是 (理解转换和作用域)似乎是使用&绑定到回调的首选方法，为什么？
浏览 2提问于2013-03-04得票数 8
回答已采纳
当范围被更新时，指令的属性不会改变，它们仍然保留初始值。我在这里错过了什么？
<ul class="nav nav-pills nav-stacked" navlist>
<navelem href="#!/notworking/{{foo}}"></navelem>
<navelem href="#!/working">works great</navelem>
</ul>
<p>works: {{foo}}</p>
Javasc
浏览 6提问于2012-09-19得票数 5
回答已采纳
HTML：
<div ng-app="myApp" ng-controller="Controller">
<test ng-if="toggle" props="condition"></test>
</div>
Javascript：
var myApp = angular.module('myApp', []);
myApp.controller('Controller', ['$scope', '$timeou
浏览 5提问于2019-10-13得票数 0
回答已采纳
1回答
我为AngularJS做了一个指令，这个指令在td表中，这是代码：
<td ng-bind="order.Referencia"/>
<directive order="order"></directive>
</td>
<td ng-bind="order.Company"></td>
<td ng-bind="order.Poblacion"></td&g
浏览 2提问于2014-03-13得票数 0
回答已采纳
1回答
我正在尝试生成如下的属性名称：
name="id{{myScopeId}}"
这在大多数情况下都能很好地工作，但是当我在一个已经有自定义指令的元素上这样做时，它就不再起作用了，结果只有"id“。
此自定义指令应用于文件输入元素，并处理文件名。
这将会起作用，结果是
name="file5" : <input name="file{{myId}}" type="file" />
这不会起作用，结果是
name="file" : <input name="file{{myId}}&
浏览 0提问于2013-05-11得票数 0
回答已采纳
我试图找出为什么我的复选框列表(来自ng-myCtrl.genreSelected中的歌曲)没有正确显示。
我有一些收音机，你可以选择三种音乐类型中的一种：
<input type="radio" name="genre" ng-value="myCtrl.rockSongs" ng-model="myCtrl.genreSelected"> Rock
<input type="radio" name="genre" ng-value="myCtrl.rapSo
浏览 0提问于2016-07-08得票数 1
回答已采纳
我正在尝试做一个简单的指令，获取一个属性并在指令中显示它
以下是合并的指令：
angular.module('JJJ')
.directive('jobCard', function () {
return {
template: '<div>name: {{job}}</div>',
restrict: 'E',
scope:{
job: "=j"
},
link: function postLink(
浏览 5提问于2014-01-22得票数 0
回答已采纳
在AngularJS中创建小部件时，通常需要有一种为小部件指定配置选项的方法。下面是一个定制的AngularJS元素：
<typeahead items="items" prompt="Start typing a US state" title="name" subtitle="abbreviation" model="name" on-select="onItemSelected()" />
这就是指令：
typeAhead.directive('typeahead'
浏览 2提问于2014-07-21得票数 1
回答已采纳
1回答
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>
@code {
[Parameter]
public string IncrementAmount
{
set
{
currentCount = Convert.ToInt32(value);
浏览 2提问于2020-01-18得票数 1
回答已采纳
2回答
请参见以下vue/nuxt组件示例：
<template>
<my-component v-model="selected" :options="options" />
</template>
<script>
export default {
props: {
currentSelected: Array,
options: Array
},
data() {
return {
selected: this.
浏览 2提问于2020-01-07得票数 2
回答已采纳
在我正在进行的新项目中，我已经开始使用组件而不是指令。
然而，我遇到了一个问题，我找不到一个具体的标准方法来做它。
从子事件到父事件很容易通知，您可以在下面的plunkr中找到它，但是从父到子之间通知事件的正确方法是什么？
Angular2似乎通过使用这样的方法来解决这个问题：，但我不认为有可能像使用#timer的示例那样定义子组件的“指针”
为了能够轻松地转换到Angular2，我想避免：
事件发射(从作用域发射和广播)
使用来自子级的需求(然后向parent..UGLY添加一个回调)
使用单向绑定，在子区域注入作用域，然后“观察”此属性。更丑
示例代码：
var app
浏览 1提问于2016-05-25得票数 24
回答已采纳
我面临的问题是，我不能将球队的俱乐部设置为[selected]的[ngValue]选项。然而，如果我使用的是[value]和[selected]，它将球队的俱乐部设置为选项，但是我不能用[value]传递对象
这里是我的代码：
使用[value]和[selected]，将球队的俱乐部设置为[selected]选项，但我不能将对象传递给[value]
<select
*ngIf="isEditing"
name="club"
#club="ngModel"
[ngModel]="team?.club&#
浏览 1提问于2020-04-18得票数 0
我对Blazor很陌生，在设计组件时，我遇到了一个使用我不熟悉的绑定方法的例子。
他们使用的是EventCallback.Factory.CreateBinder()，而不是中显示的绑定技术。
这就是它们如何完成绑定的方式：
@onchange="EventCallback.Factory.CreateBinder<string>(
this,
value => CurrentValueAsString = value,
CurrentValueAsString,
浏览 4提问于2020-09-16得票数 2
回答已采纳
3回答
我对angularjs比较新，很难理解定制指令示例和发布的博客。
我们使用它的原因以及自定义指令的用法。(使用内置指令很容易理解和使用)
可以根据我们的需要编写我们自己的自定义指令吗？
角js中的自定义指令需要什么？
浏览 3提问于2014-02-18得票数 1
回答已采纳
下面的plnkr演示了我的问题。
<ntimes repeat=10 >
<h1>Hello World - 10 {{smsg}}</h1>
<h4>More text</h4>
</ntimes>
指令：
directive('ntimes', function() {
return {
restrict: 'E',
scope:{
smsg: '='
},
compile: functio
浏览 3提问于2016-06-11得票数 0
回答已采纳
6回答
我想知道是否有办法将一个论点传递给指令？
我要做的是追加一个来自控制器的指令，如下所示：
$scope.title = "title";
$scope.title2 = "title2";
angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');
是否可以同时传递一个参数，以便我的指令模板的内容可以链接到一个范围或另一个范围？
以下是指令：
app.directive(&
浏览 4提问于2014-10-16得票数 68
回答已采纳
2回答
我希望像这样在指令中设置默认值，但它将为null
(function(angular) {
'use strict';
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
}])
.directive('myDialog', function() {
return {
restrict: 'E',
t
浏览 2提问于2015-09-01得票数 1
回答已采纳
我有以下指令：
<div teamspeak details="{{data.details}}"></div>
这是对象结构：
data: {
details: {
serverName: { type: 'text', value: 'my server name' },
port: { type: 'number', value: 'my port' },
浏览 1提问于2013-09-22得票数 77
回答已采纳
我有几个输入字段，如果只有空白，我希望验证用户输入。我尝试使用指令或过滤器。我不喜欢使用$watch，因为输入字段太多了。我需要的是:如果用户只在输入字段中设置空白，那么需要一些函数或指令来清除这个空白。我可以用jQuery或vanilla来做这件事，但是我更喜欢这个结果。
我在指令或过滤器上出错的地方
这是我的密码：
angular.module('app')
.directive('customSpaceValidation', ['$filter', function ($filter) {
return {
req
浏览 3提问于2016-11-14得票数 0
回答已采纳
很抱歉，我在谷歌上搜索了一下，查看了不脆弱的网站和GitHub部分，但是我投降了。
当使用带有的IgniteUI库时，如何实现“行上选择AngularJS”事件？
即使是包含演示的页面也没有说明如何做到这一点。
下面是实现它的jQuery方法(来自)
$("#grid").on("iggridselectionactiverowchanged", function (evt, ui) {
var message = "iggridselectionactiverowchanged";
apiViewer.log(message
浏览 1提问于2015-08-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
