Angularjs指令不能按预期工作
问题描述:
我对angularjs很新颖,所以这听起来很平凡。我想要完成的是最初一个图像和一个按钮显示在页面上。当用户单击按钮时,另一个图像也出现在页面上。Angularjs指令不能按预期工作
这里是我的html代码
<div ng-app="test">
<hello>
<pane>
</pane>
</hello>
</div>
我的角度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
};
})
任何一个可以指出可能是什么错这个directive.Here是jsfiddle
答
其实,我认为你对这个指令太深入了。您想要构建的功能实际上只是直角,并且不需要指令。试试这个(小提琴更新):
<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>
控制器:凡AddMarker()定义
angular.module('test', [])
.controller('mapController', function ($scope) {
})
+0
okk dats看起来不错,是新的角js我想我需要学习相当多的新东西。感谢它帮助:) – agasthyan 2013-03-05 09:22:48
? – 2013-03-04 23:13:44