Angularjs directive not working as expected

Question

I quite new to angularjs so this might sound trivial.What i'm tring to accomplish is that initially an image and a button is displayed on the page.When the user clicks on the button another image also appears on the page.

Here is my html code

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

My angular js directive is

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

Can any one point out what may be wrong with this directive.Here is a jsfiddle

Where is AddMarker() defined?

Mark Rajcok
– Mark Rajcok

2013-03-04 23:13:44 +00:00
Commented Mar 4, 2013 at 23:13 — Mark Rajcok
– Mark Rajcok, Commented Mar 4, 2013 at 23:13

Jason Aden · Accepted Answer · 2013-03-04 20:53:28Z

2

Actually, I think you're getting too deep into the directive. The functionality that you want to build is really just straight Angular, and doesn't need a directive. Try this (fiddle updated):

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

Controller:

angular.module('test', [])
.controller('mapController', function ($scope) {

})

http://jsfiddle.net/SfFub/3/

answered Mar 4, 2013 at 20:53

Jason Aden

2,8231 gold badge20 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

agasthyan Over a year ago

okk dats looks good,being new to angular js i think i need to learn quite a number of new things.Thanks it helped :)

Collectives™ on Stack Overflow

Angularjs directive not working as expected

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related