angularjs - how to use isolated scope in custom directive? -
i make custom directive , want use isolated scope directive problem getting dynamic data.i pretty galde if can tell me how can data url inside directive instead,in controller. how can please guide me? here custom directive:
<div my-data> </div> controller:
(function () { 'use strict'; var myapp = angular.module('myapp', []) .controller('myappctrl', ['$scope', '$http', function($scope, $http) { $http.get("https://www.reddit.com/r/worldnews/new.json") .success(function (response) { $scope.names = response.data.children; }); }]) .directive('mydata', function() { return { restrict: 'a', templateurl: 'datatable.html' }; });})(); datatable.html:
<ul> <li > <table width="80%" id="datatable" align="center" name="table1"> <tr> <td><strong>title</strong></td> <td><strong>link</strong></td> <td><strong>score</strong></td> </tr> <tr ng-repeat="x in names |filter:test|orderby:sortexpression:order "> <td id="title"><a ng-href="{{ x.data.url}}">{{x.data.title}}</a></td> <td ><a ng-href="{{ x.data.url}}">link</a></td> <td>{{x.data.score}}</td> </tr> </table> </li>
here index.html
<!doctype html> <html ng-app="myapp"> <head> <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myappctrl"> <table border="0" align="center"> <tbody> <tr> <th style="font-size: 30px;">list angular js</th> </tr> <tr> <td> <p> <input type="text" ng-model="test" class="txt" /> </p> </td> <th>search</th> </tr> <tr> <td> <select ng-model="sortexpression" class="sorting"> <option value="">please select sorting</option> <option value="data.title">title </option> <option value="data.score">score</option> </select> <input id="asc" type="radio" name="order" ng-model="order" ng-value="false" /> asc <input id="desc" type="radio" name="order" ng-model="order" ng-value="true" /> desc </td> </tr> </tbody> </table> <div my-data="" remoteurl="url" filtertext="test" sortexpression="sortexpression" orderby="order"></div> </div> </body> </html> here datatable.html
<ul> <li> <table width="70%" align="center"> <tr> <th>title</th> <th>score</th> </tr> <tr ng-repeat="x in names | filter:filtertext | orderby:sortexpression:orderby"> <!-- <td>{{ $index + 1 }}</td>--> <td><a ng-href="{{ x.data.url}}">{{x.data.title}}</a></td> <td>{{x.data.score}}</td> </tr> </table> </li> </ul> here js
(function() { 'use strict'; var myapp = angular.module('myapp', []) .controller('myappctrl', ['$scope', '$http', function($scope, $http) { $scope.url = "https://www.reddit.com/r/worldnews/new.json"; }]) .directive('mydata', ['$http', function($http) { return { restrict: 'a', scope: { remoteurl: "=", filtertext: "=?", sortexpression: "=?", orderby: "=?" }, templateurl: 'datatable.html', link: function(scope, element, attr) { scope.names = []; $http.get(scope.remoteurl) .success(function(response) { scope.names = response.data.children; }); } }; }]); })();
Comments
Post a Comment