CODEWITHSUNDEEP
angularjsangularjs-directive
dreamer
dreamer

Reputation: 901

Not able to require a directive from another directive in angularJS

Getting an error while trying to require directive msgpallete from directive itemCounter.
I have removed codes from some functions which i thought is irreelevant in this context.
Do ask for any code which you think is important.Kinda new to angular. So may have many misconceptions.

HTML snippet

<msgpallete msg="message"></msgpallete>
<li ng-repeat = "item in items">

<item-counter 
    startcounter = 1 
    resetter     = 'reset' 
    name         = {{item.name}} >
    {{item.name}}
</item-counter><br><br>
</li>

JS snippet

angular.module('myApp',[])
.controller('MainCtrl', function($scope, $timeout) {
  ....code irreleveant in this context....
})
.directive('msgpallete',function(){
 return{
    restrict:"E",
    scope:{},
    template:"<h4>Added"+""+" "+"</h4>"
  }
})   
.directive('itemCounter',function(){
return {    
    restrict:'E',
    require:'msgpallete',
    scope:{
      resetter:"="
    },
    transclude:true,
    link:function(scope,elem,attr){
        scope.qty = attr.startcounter
        scope.add = function(){}
        scope.remove = function(){}
        scope.reset = function(){}
        scope.$watch();
    },
    template:"<a ng-transclude></a> &nbsp"+
             "<button ng-click='remove();' >less</button>"+
             "{{qty}}" +
             "<button ng-click='add();'>more</button>&nbsp"+
             "<button ng-click='reset();'>submit</button>"
}
});

thanks in advance

Upvotes: 1

Views: 1170

Answers (1)

Enzey
Enzey

Reputation: 5254

require:'^msgpallete'

The require parameter has additional functionality if you look through the docs for it.

  1. someDirective : Require someDirective on same element and pass it to linking function
  2. ?someDirective : Pass someDirective controller if available on same element to linking function. If not, pass null.
  3. ^someDirective : Require someDirective on one of the parent elements and pass it to linking function.
  4. ?^someDirective : Pass someDirective controller if available on one of parent elements to linking function. If not, pass null.

It has been a little while since I have done this and the directive you are requiring may need to explicitly defined a controller. Just defining and return an empty controller is enough.

.directive('parent', function() {
    return: {
        controller: function() {return {}}
    }
})

Upvotes: 1

Related Questions