0

私はangularjsを初めて使用するので、これは些細なことのように聞こえるかもしれません。私が達成しようとしているのは、最初に画像とボタンがページに表示されることです。ユーザーがボタンをクリックすると、別の画像もページに表示されます。

これが私のhtmlコードです

    <div ng-app="test">
<hello>
    <pane>
    </pane>
</hello>
</div>

私のAngularjsディレクティブは

    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です

4

1 に答える 1

2

実は、あなたは指令に深く入り込んでいると思います。構築したい機能は、実際には単純な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/

于 2013-03-04T20:53:28.617 に答える