如何在自定义指令中使用隔离范围？

Question

我创建了一个自定义指令，现在我想对该指令使用独立作用域，但问题是我正在变得动态 data.I 如果有人能告诉我如何从 url 也在指令内部，在控制器中。我该怎么做请指导我？这是我的自定义指令：

 <div my-data>
    </div>

控制器：

 (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>

Answer 1

这里是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 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>

这里是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>

这里是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

Answer 2

是的，您可以使用 scope:{} 创建隔离范围，要使用 $http，您需要注入它的依赖项。请参阅下面的代码

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;
              });
          }
        };
    });

如何在自定义指令中使用隔离范围？

how to use isolated scope in custom directive?

directive

angularjs