CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui
Shardul Pendse
Shardul Pendse

Reputation: 304

How to use custom directives.

I have mentioned HTML code below

<div class="panel" ng-controller="myController">
   <div  myArr="arr" my-Dir="">
</div>

JavaScript is

app.controller('myController',['$scope',function($scope){
// here i have one array of objects arr is here
}])

and Directive is

app.directive("myDir", function() {
scope: {
     myArr: "=",
    },
    templateUrl: "views/myHTML.html"
  };
});

Here I am including myHTML.html file. How do I pass the array to this file?. I need this array in myHTML.html file. I want to display the array elements in the myHTML using the ng-repeat.

Upvotes: 1

Views: 68

Answers (2)

hassassin
hassassin

Reputation: 5054

You are using dayArr in the html and then trying to isolate your scope on something called dayArray. These don't match up. You also need to pass the array into dayArr so that it can actually have a value in your scope

I've updated the fiddle to have a working example http://jsfiddle.net/zpWsz/2/

This is the relevant bits:

Here is where I pass in some dummy array.

<div  my-dir="" day-arr="[1,2,3]" >

Here is the updated directive pieces:

    scope: {
      dayArr : "="
    },
    template: '<ul>' + 
              '<li ng-repeat="i in dayArr">{{ i }}</li>' +
              '</ul>',

A templateUrl would work too, but how you had it in the fiddle was throwing js errors.

Hope this helped.

Upvotes: 2

Anand
Anand

Reputation: 14915

custom directive template

app.directive('myDir', function(){
    return {
        scope: {
          myArr: "=",
        },
        restrict: 'EAC',
        templateUrl: 'views/myHTML.html',
        link: function(scope, element, attr) { }
    };
});

And to use it

<div data-my-dir data-my-arr="arr">

Upvotes: 0

Related Questions