Question

我制作了一个自定义指令，现在我想使用此指令使用隔离范围，但问题是我正在获取动态数据。如果有人可以告诉我如何从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

是的，您可以使用范围创建隔离范围：{} 并使用$ 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>

角

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

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

2 个答案: