Question

控制器

angular.module('myApp')
  .controller('myCtrl', [  '$mdDialog', '$mdMedia', 'viewDialog', myCtrl]);
..

function myCtrl(  $mdDialog, $mdMedia, viewDialog) {   
    $scope.viewItem = function(ev,id) {
        viewDialog.ITEM(ev,id)
    };
}

HTML

<div ng-controller="myCtrl">
  <md-list-item ng-repeat="item in myarr">
     <a  my-view-dialog">
       <h4> {{item.id}} </h4>
     </a>
  </md-list-item>
</div>

当我直接从控制器调用该函数时，模态窗口在单击

时工作正常

使用指令

我的指示

angular.module('myApp')
    .directive('myViewDialog', function ($parse) {
        return {
            compile: function(tElm,tAttrs){
              var exp = $parse('viewItem($event,item.id)')
              return function (scope,elm){
                elm.bind('click',function(){
                  exp(scope);
                });
              };
            }
        };;
    });

现在我想删除控制器依赖项并直接从它不起作用的指令调用viewDialog服务。

这里是服务注入的代码

angular.module('myApp')
    .directive('myViewDialog', function ($parse, viewDialog) {
        return {
            compile: function(tElm,tAttrs){
              var exp = $parse('viewDialog.ITEM($event,item.id)') 
          return function (scope,elm){
                elm.bind('click',function(){
                  exp(scope);
                });
              };
            }
          };;
    });

Answer 1

而不是

.directive('myViewDialog', function ($parse, viewDialog)

尝试

.directive('myViewDialog', [ '$parse', 'viewDialog', function ($parse, viewDialog)

Answer 2

angular.module('myApp')
    .directive('myViewDialog',['viewDialog','$parse', function (viewDialog,$parse) {
    return {
        compile: function(tElm,tAttrs){
          var exp = $parse('viewDialog.ITEM($event,item.id)') 
      return function (scope,elm,attr,ctrl){
            elm.bind('click',function(){
              exp(scope);
            });
          };
        }
      };;
}]);

如何使用指令中的服务来调用函数？

2 个答案: