Директива Angularjs не работает должным образом

Question

Я совершенно новый для 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

Answer 1

На самом деле , Я думаю, вы слишком глубоко входите в директиву. Функциональность, которую вы хотите построить, на самом деле просто прямолинейная, и ей не нужна директива. Попробуйте (скрипку обновленный):

<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/