AngularJS - 指令不起作用
[英]AngularJS - directive not working
问题描述
I am an AngularJS newby. 
我是AngularJS newby。 I am trying to display an image using a template of an AngularJS directive and on click of the image I want a marker to be placed on the image. 我正在尝试使用AngularJS指令的模板显示图像，并单击图像我想要将标记放置在图像上。 I Don't know why it is not working. 我不知道为什么它不起作用。
The first directive: 第一个指令：
directive('hello', function() {
return {
template: '<img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg" />',
link: function(scope, element, attrs) {
$('#map').click(
function(e) {
$('#marker').css('left', e.pageX).css('top', e.pageY).show();
}
);
},
};
});
The html code HTML代码
<hello>
<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" />
</hello>
5 个解决方案
解决方案1
36 2014-01-13 21:25:27
Some other possible issues: 其他一些可能的问题：
- The Javascript file containing your directive is not being loaded. 未加载包含您的指令的Javascript文件。 This can happen if you're using Yeoman to generate your directive, and your index.html file is not modified. 如果您使用Yeoman生成指令，并且未修改index.html文件，则会发生这种情况。
- You are using a camelCase element name in your HTML instead of hyphenated . 您在HTML中使用camelCase元素名称而不是连字符 。 If your directive is called
widgetFormandrestrictis'E'or'A', you should use<widget-form/>, not<widgetForm/>.如果您的指令名为widgetForm且restrict为'E'或'A'，则应使用<widget-form/>，而不是<widgetForm/>。
解决方案2
23 已采纳 2013-03-04 10:16:35
You are missing the restrict : 'E' option, by default restrict has the value AC which is attribute and class, in your case you are using the directive as an element. 您缺少restrict : 'E'选项，默认情况下， restrict具有值为AC的属性和类，在您使用指令作为元素的情况下。
Update: Based on comment 更新：根据评论
angular.module('test', []).directive('hello', function() {
return {
restrict : 'E',
template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg" /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>',
replace: true,
link : function(scope, element, attrs) {
$('#map').click(function(e) {
$('#marker').css('left', e.pageX).css('top', e.pageY)
.show();
});
}
};
});
解决方案3
2 2013-03-04 10:40:47
By default when you make a directive in angularjs. 默认情况下，您在angularjs中创建指令。 if you ignore restrict property angularjs assume it as an attribute. 如果忽略restrict属性angularjs则将其视为属性。 as your html showing you should write your returning object as bellow 因为你的html显示你应该把你的返回对象写成下面
<body ng-app="myApp">
<hello>
<div id="marker"></div>
</hello>
</body>
and in angular the element is already a jQuery object even if you do not add jquery it will use its own implementation call jQLite. 并且在angular中，元素已经是一个jQuery对象，即使你不添加jquery，它也会使用它自己的实现调用jQLite。 so you should only use 所以你应该只使用
var app = angular.module('myApp', []);
app.directive('hello',function(){
var linkFn = function (scope,element,attrs){
element.bind('click',function(e){
$('#marker').css('left', e.pageX).css('top', e.pageY).show();
});
};
return {
restrict : "E",
link: linkFn,
transclude:true,
template:'<div ng-transclude><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg" /></div>'
};
});
i hope it helps working exmaple 我希望它有助于工作
解决方案4
1 2013-03-04 10:23:23
What @Arun said is correct. @Arun说的是对的。 But it is not mandatory. 但这不是强制性的。 By default ur directive will be attribute. 默认情况下，ur指令将属性。
So Instead of using ur directive as a element 所以不要使用ur指令作为元素
<hello>
<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png"style="display: none; position: absolute;" />
</hello>
try it as an attribute, like this 尝试将其作为属性，就像这样
<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" hello />
解决方案5
0 2016-07-02 17:37:00
Don't append "Directive" to the first string argument: 不要将“Directive”附加到第一个字符串参数：
.directive("someDirective", someDirective)
Should've been this for me: 本来应该是这样的：
.directive("some", someDirective)
At least, it should be, if you want to use: 至少，它应该是，如果你想使用：
<some>stuff</some>
Finding copy-paste errors is awful. 查找复制粘贴错误非常糟糕。 Needing to find one is too... :'( 需要找到一个......：'（
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.