在指令控制器中使用$attrs时出现问题

Trouble using $attrs in directives controller

本文关键字：问题 attrs 指令控制器      更新时间：2023-09-26

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

如果我不使用属性并将placesFact.getDetails(idModel)更改为placesFact.getDetails($scope.model)，一切都很好，但我希望该指令具有更大的灵活性。

*更新：为了澄清placesFact.getDetails()方法，它查找带有位置id的谷歌位置信息，并将结果作为promise返回。它经过测试，运行良好。

指令

.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>
正如estus在评论中提到的，我的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>'
  }
})
相关文章：