mdDialog中jk-rating-stars的on-rating事件不触发问题求助

这个问题的核心原因是AngularJS的mdDialog默认会创建一个独立的子作用域，你模板里绑定的onItemRating函数属于父控制器的作用域，但dialog的模板无法直接访问到这个父作用域的函数，所以事件触发时找不到对应的方法。

下面给你几个可行的解决方案：

方案1：在dialog控制器中绑定父作用域的函数 #

直接在mdDialog的配置里添加controller属性，把父作用域的onItemRating函数绑定到dialog的作用域上，同时记得初始化评分变量rate：

$scope.onItemRating = function(rating) { 
  debugger; 
  console.log(rating); 
  console.log("Hello World"); 
};

var parentEl = angular.element(document.body);
$mdDialog
.show({
  parent: parentEl,
  targetEvent: $event,
  template: '<md-dialog>' + 
            '<md-dialog-content>' + 
            '<jk-rating-stars class="my-custom-stars" max-rating="5" rating="rate" on-rating="onItemRating(rating)"></jk-rating-stars>' + 
            '</md-dialog-content>' + 
            '</md-dialog>',
  clickOutsideToClose: true,
  escapeToClose: true,
  controller: function($scope) {
    // 将父作用域的函数绑定到dialog作用域
    $scope.onItemRating = $scope.$parent.onItemRating;
    // 初始化评分值，避免undefined问题
    $scope.rate = 0;
  }
})
.finally(function() { /* 你的清理逻辑 */ });

方案2：使用隔离作用域传递函数（更规范） #

如果不想直接依赖$parent，可以创建隔离作用域并通过scope配置传递函数，这样代码耦合度更低：

$mdDialog
.show({
  parent: parentEl,
  targetEvent: $event,
  template: '<md-dialog>' + 
            '<md-dialog-content>' + 
            '<jk-rating-stars class="my-custom-stars" max-rating="5" rating="rate" on-rating="handleRating(rating)"></jk-rating-stars>' + 
            '</md-dialog-content>' + 
            '</md-dialog>',
  clickOutsideToClose: true,
  escapeToClose: true,
  // 创建隔离作用域，通过&绑定父作用域的函数
  scope: {
    handleRating: '&'
  },
  controller: function($scope) {
    $scope.rate = 0;
  },
  // 传递父作用域的onItemRating到隔离作用域的handleRating
  locals: {
    handleRating: $scope.onItemRating
  }
})

方案3：使用controllerAs语法（推荐长期项目使用） #

如果你的项目采用controllerAs风格（更符合AngularJS最佳实践），可以这样处理：

首先父控制器里改用this绑定函数：

var vm = this;
vm.onItemRating = function(rating) { 
  debugger; 
  console.log(rating); 
  console.log("Hello World"); 
};

然后mdDialog配置：

$mdDialog
.show({
  parent: parentEl,
  targetEvent: $event,
  template: '<md-dialog>' + 
            '<md-dialog-content>' + 
            '<jk-rating-stars class="my-custom-stars" max-rating="5" rating="vm.rate" on-rating="vm.onItemRating(rating)"></jk-rating-stars>' + 
            '</md-dialog-content>' + 
            '</md-dialog>',
  clickOutsideToClose: true,
  escapeToClose: true,
  controller: function($scope) {
    var vm = this;
    vm.rate = 0;
    // 引用父控制器的方法
    vm.onItemRating = $scope.$parent.vm.onItemRating;
  },
  controllerAs: 'vm',
  bindToController: true
})

额外注意点 #

• 确保模板里的rating="rate"对应的变量在dialog作用域中存在，否则可能导致组件初始化异常，进而影响事件触发。
• 避免直接使用scope: $scope（直接继承父作用域），这样会导致作用域污染，后期维护容易出问题。

内容的提问来源于stack exchange，提问作者Jeff