如何从我的 ng-repeat 指令中的隔离范围调用此父函数？答案

【问题标题】：How can I call this parent function from the isolate scope in my ng-repeat directive?如何从我的 ng-repeat 指令中的隔离范围调用此父函数？
【发布时间】：2015-04-01 18:29:46
【问题描述】：

我的页面中定义了以下控制器和指令：

var pof = angular.module('pof', []);

pof.controller("Main", function($scope, $rootScope) {
  $scope.services = [{
    id: 1,
    name: "service1"
  }, {
    id: 2,
    name: "service2"
  }, {
    id: 3,
    name: "service3"
  }, {
    id: 4,
    name: "service4"
  }, {
    id: 5,
    name: "service5"
  }];

  // I want to call this when an item is selected from the dropdown
  // and I want to be able to access the name of the selected item
  $scope.selectService = function(service) {
    console.log("service:" + service.name);
  }

});

pof.directive('bsDropdown', function($compile) {
  return {
    restrict: 'E',
    scope: {
      items: '=dropdownData',
      doSelect: '&selectVal',
      selectedItem: '=preselectedItem'
    },
    link: function(scope, element, attrs) {
      var html = '<div class="btn-group"><button class="btn button-label btn-info">Choose a service</button><button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu"><li ng-repeat="item in items"><a tabindex="-1" data-ng-click="selectVal(item)">{{item.name}}</a></li></ul></div>';

      element.append($compile(html)(scope));

      for (var i = 0; i < scope.items.length; i++) {
        if (scope.items[i].id === scope.selectedItem) {
          scope.bSelectedItem = scope.items[i];
          break;
        }
      }

      scope.selectVal = function(item) {
        $('button.button-label', element).html(item.name);
        scope.doSelect({
          selectedVal: item.id
        });
      };

      scope.selectVal(scope.bSelectedItem);
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
<script src="https://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<body ng-app="pof" ng-controller="Main">

  <bs-dropdown data-menu-type="button" select-val="selected_service = selectedVal" preselected-item="selected_service" data-dropdown-data="services">
  </bs-dropdown>&nbsp; Selected Value : {{selected_service}}

</body>

当从下拉列表中选择一个选项时，我希望能够将所选项目传递给Main 控制器中的$scope.selectService() 函数。

$scope.selectService = function(service) {
    console.log("service:" + service.name);
}

如何修改我的代码来做到这一点？

【问题讨论】：

标签： angularjs angularjs-directive isolate-scope

【解决方案1】：

您已经在使用doSelect: '&selectVal' 执行父作用域中的表达式。

将 select-val="selected_service = selectedVal 更改为 select-val="selectService(selectedVal)" 并将整个作为选定值传递，而不仅仅是 id：scope.doSelect({ selectedVal: item });。您仍然可以将 ID 放入 selectService 函数中的 selected_service 变量中。

【讨论】：

【解决方案2】：

我认为问题出在您用于以“&”方式传递函数的属性上。我通常这样做

&lt;bs-dropdown data-menu-type="button" select-val="selectedVal(service)"&gt;&lt;/bs-dropdown&gt;

之后，您可以像这样在指令中使用该函数

doSelect({service: ...})

【讨论】：