Question

我有一个角度应用程序，脚本中包含以下代码：

var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope, FileAccessor) {
  $scope.countrynames = []
});

myApp.directive('country', function() {
  var directiveDefinitionObject = {

    restrict: 'E',
    templateUrl: 'partials/scape.html',
    controllerAs: 'dm',
    compile: function(scope, FileAccessor) {
      FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').success(function(response) { //assigning the fetched countries to the scope object var
        scope.countrynames = response;
      });

    }
  }
  return directiveDefinitionObject;
})

myApp.factory("FileAccessor", ['$http', function($http) {
  return {
    fetchCountryDetails: function(url) {
      return $http.get(url);
    }
  }
}]);

在scape.html内部，放置以下代码：

<div  ng-controller="Ctrl"   class="container" style="height:500px" >

    <select ng-model="model" ng-options="obj.name for obj in countrynames | orderBy: '-population'" placeholder="Select" autofocus>
        <option value="">- Please Choose -</option>
    </select>
    {{model.name}}
    {{model.currencies[0]}}
</div>

正如我们所看到的，我正在尝试从自定义指令FileAccessor访问工厂内放置的函数country。

当我在浏览器上运行它时，控制台上会弹出此错误： angular.min.js：86 TypeError：FileAccessor.fetchCountryDetails不是函数

有人可以解释一下固定代码出了什么问题吗？

P.S。我希望只通过工厂处理HTTP请求（作为要求）。

编辑1：在此处包含Plunkr链接：http://plnkr.co/edit/gXQKBd?p=info

Answer 1

在编译函数中的指令声明 NOT 中注入服务：

myApp.directive('country', function(FileAccessor) { //inject FileAccessor here
  var directiveDefinitionObject = {
    restrict: 'E',
    templateUrl: 'partials/scape.html',
    controllerAs: 'dm',
    compile: function(scope) {
      FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').success(function(response) { //assigning the fetched countries to the scope object var
        scope.countrynames = response;
      });

    }
  }
  return directiveDefinitionObject;
})

编辑：您的代码中有很多错误，也许您想阅读文档？

一：使用link代替compile，因为link为您提供了范围，但compile没有：

myApp.directive('country', function(FileAccessor) {
  var directiveDefinitionObject = {
    restrict: 'E',
    templateUrl: 'scape.html',
    controllerAs: 'dm',
    link: function(scope) {
      scope.test="Hello";
      FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').then(function(response) { //assigning the fetched countries to the scope object var
        scope.countrynames = response.data;
      });
    }
  }
  return directiveDefinitionObject;
})

二：删除ng-controller中的scape.html指令，因为这将覆盖您的指令：

<div class="container" style="height:500px"> //remove the ng-controller='Ctrl'
  <select ng-model="model" ng-options="obj.name for obj in countrynames | orderBy: '-population'" placeholder="Select" autofocus>
    <option value="">- Please Choose -</option>
  </select>
  {{model.name}} {{model.currencies[0]}}
</div>

这是working plnkr

Answer 2

在分析了你的代码并同意@CozyAzure后，我发现有一个控制器Ctrl在脚本中没有做任何事情。

你真的需要这个吗？从script.js和index.html中删除它并进行运行。这肯定会以所需的方式获取数据。

无法从custom指令访问工厂内的功能

2 个答案: