javascript - Custom search filter in angularjs -
i using inbuilt search filter of angular js this-
<!--header starts--> <input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder=" search"> <!--header ends--> <!--content area--> <div ng-repeat="user in users | filter:search"> {{ user.name }} {{user.l}} {{user.time}} </div> <!--content area ends-->
now removed header template codes , created header directive.
<!--header starts--> <div site-header> </div> <!--header ends--> <!--content area--> <div ng-repeat="user in users | filter:search"> {{ user.name }} {{user.l}} {{user.time}} </div> <!--content area ends-->
site-header.js:
'use strict'; angular.module('myapp') .directive('siteheader', function () { return { templateurl: 'views/header-view.html', scope: { }, restrict: 'a', controller: [ '$scope', '$rootscope', '$location', function($scope, $rootscope, $location) { console.log($scope.data); }], link: function postlink(scope, element, attrs) { } }; });
header-view.html
<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder=" search">
all html templates loading correctly. search filter not working. dont understand how bind search.name
directive in order work. tried this-
<div site-header="search.name"> </div>
but how access data in directive , bind ng-model?
change directive definition:
app.directive('mydirective', function(){ return { restrict: 'a', template: [ '<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder=" search"/>' ].join(''), scope: true } });
here demo:http://plnkr.co/edit/jncjzs?p=preview
Comments
Post a Comment