Angularjs指令没有按预期工作
Angularjs directive not working as expected
我对angularjs很陌生,所以这听起来可能微不足道。我想要完成的是,最初的图像和一个按钮显示在页面上。当用户点击按钮时,另一个图像也出现在页面上。
这是我的html代码
<div ng-app="test">
<hello>
<pane>
</pane>
</hello>
</div>
我的angular js指令是
angular.module('test', []).directive('hello', function() {
return {
restrict : 'E',
template : '<div style="position: relative"><input name="Add" type="submit" ng-click="AddMarker()" ><img src="http://www.india-travelinfo.com/india-maps/india-map.jpg" /></div>',
replace: true,
link : function(scope, element, attrs) {
$("#mr").draggable();
},
controller: function($scope, $element) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}
};
}).
directive('pane', function() {
return {
require: '^hello',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<img id="mr" class="drag-image" src="http://www.mbs.edu/i/gmap_marker_default.gif" style="position: absolute;" />',
replace: true
};
})
有谁能指出这个指令有什么问题吗?这是一个jsfield
实际上,我认为你对指令太深入了。你想要构建的功能实际上是直接使用Angular的,不需要任何指令。试试这个(小提琴更新):
<div ng-app="test" ng-controller="mapController">
<div style="position: relative">
<button name="Add" type="button" ng-click="showMarker = true">Show Marker</button>
<img src="http://www.india-travelinfo.com/india-maps/india-map.jpg" />
<img id="mr" ng-show="showMarker" class="drag-image" src="http://www.mbs.edu/i/gmap_marker_default.gif" style="position: absolute;" />
</div>
</div>
控制器:
angular.module('test', [])
.controller('mapController', function ($scope) {
})
http://jsfiddle.net/SfFub/3/相关文章:
- JavaScript指令不能像我想象的那样工作
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- AngularJS指令意外地协同工作
- 角度控制器功能赢得'不按指令工作
- 角度指令中的模糊无法正常工作
- 带有Angular指令的HTML;附加时无法工作
- 角度控制器功能不;在指令内部调用时,似乎无法始终如一地工作
- 如何使Angular JS控制器与指令一起工作
- AngularJS Dropdown在使用指令后不再工作
- 使用 Angular 和 UI-bootstrap 对模态事件绑定无法工作的指令
- 角度指令和属性Don'在控制器内创建和设置时无法工作
- 指令中的指令-手表不工作
- 超链接;编译angular指令内的模板后无法工作
- 如何让ng repeat在指令模板中工作
- AngularJS:指令没有启动或工作
- $render在角度1.2.2停止工作(文件验证指令)
- 部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作
- 角度控制器的作用是什么;t控制器'他的工作由指令来完成
- Typescript$inject$timeout到指令中..在控制器中工作,而不是在链接中
- AngularJS:拆分到新文件时不调用工作指令