Question

我的指令有一个属性id-model，用于将数组传递给指令。指令控制器应该使用该数组作为参数执行函数。我可以访问我的控制器中的属性并记录数组，但我的功能从未运行，我不知道为什么。

如果我不使用该属性并将placesFact.getDetails(idModel)更改为placesFact.getDetails($scope.model)，一切正常，但我希望指令更灵活。

*更新：为了澄清placesFact.getDetails()方法，它会查找带有地点ID的Google地方信息，并将结果作为承诺返回。它已经过测试并且工作正常。

指令

.directive('gPlaces', function() {
  return {
    restrict: 'E',
    scope: '@',
    link: function(scope, element, attrs) {
      scope.tempUrl = attrs.tempUrl;
    },
    controller: function($scope, $attrs, placesFact) {
      var idModel = $attrs.idModel;

      $attrs.$observe('idModel', function(value) {
        idModel = value;
        console.log(idModel);  // This logs the array
        placesFact.getDetails(idModel).then(function(results) {
          console.log(results);  // This logs nothing
          $scope.places = results;
        });
      });
    },
    template: '<div ng-include="tempUrl"></div>'
  }
})

控制器

angular.module('myApp').controller('PlacesCtrl', function($scope) {

    $scope.model = [
        'ChIJR4dOl_hYwokRApSCaQiBidk',
        'ChIJv-Ghof5YwokRMtWLEV12hJI',
        'ChIJjyX2GqRZwokRT-gdcGoPuSI',
        'ChIJqSurReFYwokRec7JFACToas',
        'ChIJn8dCo-NYwokRC_4nRUQWbNE',
        'ChIJszmN0-JYwokRk-XCDbO6X_Y',
        'ChIJt4TrE_1YwokRVedrKxaqYoo',
        'ChIJiW0WvwJZwokRIWyzCvo3o5k',
        'ChIJsS1xLQJZwokRGfXJPMwXA1A',
        'ChIJI5xCX6NZwokR3jdSQwsw2DI',
        'ChIJuVE5aLtZwokR-K75OxUEtzI',
        'ChIJ7R4tgLtZwokRM8thlhlzE2o',
        'ChIJxbWTG_pYwokRPgtFVKi-Cuc',
        'ChIJKZVnwFVYwokRgDw_sxw3NCo',
        'ChIJw_JUgvhYwokR91EMxVDhB8M',
        'ChIJZ3oXOVZYwokRNnAXaDRKAzg',
        'ChIJP9idxlZYwokRLH-I1mNfzYQ',
        'ChIJndGJ5FNYwokRricJvhT0t1s',
        'ChIJhZ0Sn1ZYwokRRA1MZJZHrHA',
        'ChIJhTdv51NYwokR7V105uVzf8g',
        'ChIJvfVwDFJYwokRtWobbwOMEVM',
        'ChIJpY9Tg01YwokRCr_aQpDrqgk',
        'ChIJ-fRuLFdYwokR0KKQ6Av_WhQ',
        'ChIJh-DIsE1YwokRhuFrdM1ge5E'
    ];    
});

查看

<g-places temp-url="pages/places/multiTemp.html" id-model={{model}}></g-places>

Answer 1

正如评论中提到的那样，我的scope: '@'语法错误，是问题的根源。这是我的第一个指令，所以一点点的试验和错误以及大量的阅读引导我弄清楚该怎么做。

以下是该指令现在的工作方式。

.directive('gPlaces', function() {
  return {
    restrict: 'E',
    scope: {
      idModel: '=',
      tempUrl: '@'
    },
    controller: function($scope, placesFact) {

      placesFact.getDetails($scope.idModel).then(function(results) {
        $scope.places = results;
      });
    },
    template: '<div ng-include="tempUrl"></div>'
  }
})

在指令控制器中使用$ attrs时遇到麻烦

1 个答案: