CODEWITHSUNDEEP
angularjsdirective
Hassan
Hassan

Reputation: 349

how to use isolated scope in custom directive?

I make a custom directive and now i want to use isolated scope with this directive but problem is that i am getting dynamic data.I also pretty galde if someone can tell me how can i get the data from url also inside directive instead,in controller. how can i do this please guide me? here is my 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>

Upvotes: 1

Views: 481

Answers (2)

Shohel
Shohel

Reputation: 3934

Here is the index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="[email protected]" 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 with 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 for 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 is the 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 is the 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;
            });
        }
      };
    }]);
})();

PLUNKER

Upvotes: 1

Shubham Nigam
Shubham Nigam

Reputation: 3944

Yes you can create isolate scope with scope:{} and to use $http you need to inject its dependency .see the code below

Html

<div my-data>
<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>

Angular

'use strict';

   var myApp = angular.module('myApp', []);
  myApp.directive('myData', function($http) {
        return {
             scope:{},
             restrict: 'A',
             templateUrl: 'DataTable.html',
             link:function(scope, el, attrs){
                $http.get("https://www.reddit.com/r/worldnews/new.json")
                 .success(function (response) {
                    $scope.names = response.data.children;
              });
          }
        };
    });

Upvotes: 0

Related Questions