angularJS指令之间的共享方法

时间:2015-08-17 20:19:24

标签: javascript html angularjs

如何在两个指令之间共享方法?当我现在尝试它时,控制台说scope.triggerInput();未定义;如果我用一个字符串替换scope.triggerinput就可以了。所以我想我在属性中做错了。

app.directive('myImage', function () {
    return{
         restrict: 'A',
         template: ' <img ng-src="images/needed/noPhoto.png"class="hover">',
         link: function (scope, element, attr) {
              element.bind('click', function () {
                   scope.triggerInput();
              });
          }
     };
});   

app.directive('myFileInput', function (httpPostFactory) {
        return{
            restrict: 'A',
            scope: {
                triggerInput: '='
            },
            link: function (scope, element, attr) {
                scope.triggerInput = function () {
                    console.log('triggerInput');
                    element[0].click();
                };
            }
        };
    });

HTML

<div data-my-image></div>
<input data-my-file-input type="file" name="file" triggerInput='triggerInput()'>

1 个答案:

答案 0 :(得分:3)

非常好的问题!如果我理解你的情况,Angular Service就是你需要在这些情况下使用的。

app.service('clickResponder',function(){
   var srvc={};
   srvc.triggerInput=function(){
       // Do your stuff here. 
   }
  return srvc;

}

现在,要使用此服务,只需将其注入您的指令,如下所示:

app.directive('myImage', function (clickResponder) {
return{
     restrict: 'A',
     template: ' <img ng-src="images/needed/noPhoto.png"class="hover">',
     link: function (scope, element, attr) {
          element.bind('click', function () {
               clickResponder.triggerInput();
          });
      }
 };
});   

这就是你需要做的一切。希望这能以某种方式帮助你!