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
    };
  })

任何人都可以指出这个指令可能有什么问题。这是一个jsfiddle

Answer 1

实际上，我认为你的指令太深入了。 您要构建的功能实际上只是直接的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/