how to display angular directive?

Question

I built a directive but is not displaying on the page? This is the code:

app.directive('resetFilter', function () {
  return {
    restrict:'E',
    template:'<div>     This is the filter:           <a href="#" ng-click="resetFilter()">Reset Filter</a>             </div>',
    controller:function($scope){
      $scope.resetFilter= function(){
        console.log('resetfilter this one !!!!');
        $scope.name=''
        console.log('accname',$scope.name);
      };
    }
  };
});

html looks like this:

<body ng-controller="MainCtrl">
<reset-filter></reset-filter>
       name: {{hello}}
       <input type="text" ng-model='hello' />
</body>

Also how can I trigger the resetFilter function? I want to reset the $scope.name value? plunk: http://plnkr.co/edit/rUCMq9?p=preview

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

Check this out.

http://plnkr.co/edit/9DjCYfXqvkD7kURpTHCv?p=preview

app.controller('MainCtrl', function($scope) {

    $scope.hello='hell2o';

});

app.directive('resetFilter', function () {
    ....
});

You have to add the directive outside the controller.

As for 'resetting value', check this one out AngularJS - pass function to directive

Basically, you need to create the 'reset' function in your controller then pass it in your directive where you put it in ng-click.

Let me know if this helps.

edited May 23 '17 at 10:29

Community

1
1

answered Sep 14 '15 at 04:28

kdlcruz

1,368
13
20

@Pindakaas if you still can't figure it out. You can check this one http://plnkr.co/edit/NjpjO18qH53QQv0LW811?p=preview. – kdlcruz Sep 14 '15 at 04:41

how to display angular directive?

1 Answers1