Angular指令指定具有多行为的相同范围

Question

我有一个指令，其范围为refresh。在我的情况下，刷新应该是对象或函数，所以我如何将这个指定给我的指令。

1.第一种情况

<!--HTML--> 
<directive 
    refresh="vm.refresh"> 
</directive> 

//JS 
scope:{refresh:"="} 

2.第二种情况

<directive 
    refresh="vm.refresh(search)"> 
</directive> 

//JS 
scope:{refresh:"&"} 

3.我的情况下

<directive 
    refresh="vm.refresh or vm.refresh(search)"> 
</directive> 

//JS - What to do ? need help 
scope:{refresh:"=&needHelp"} 

但我需要这两种功能在我的指令，因此，如何能我分离 thi都是。我需要知道应用刷新范围是对象或功能在指令的链接功能。

Answer 1

你可以尝试下面的东西，我没有测试过这个代码，但只是考虑提示/想法。

<directive refresh="refreshFromOuter" search="outerSearchString">" </directive> 

refreshFromOuter可以是字符串或函数。 in指令控制器

return { 
     restrict: 'EA', 
     scope: { 
      name: '=', 
      refresh:'=', 
      search:'@' 
     }, 
     controller:function($scope){ 
      console.log($scope); 
      if(angular.isFunction($scope.show)){ 
      alert('is Function'); 
      $scope.refresh($scope.search || ''); 
      } 
      else{ 
      alert($scope.refresh + 'as string'); 
      } 
     }, 
     template: '<div>Some template</div>' 
    }; 

Answer 2

这是棘手的情况。在这种情况下，您可以检查哪些类型的表达式属于哪个类型。但是，您需要在$parse服务的帮助下手动解析属性值。

.directive('directive', function($parse) { 
    return { 
    scope: { 
     // some other bindings, scope is isolated 
    }, 
    template: '<button ng-click="test()">Test</button>', 
    link: function(scope, element, attrs) { 

     // parse attribute expression (not evaluated yet) 
     var callback = $parse(attrs.refresh); 

     scope.search = 'Search query'; 

     scope.test = function() { 

     // when needed to refresh: evaluate refresh callback 
     var evalled = callback(scope.$parent, {search: scope.search}); 
     if (typeof evalled == 'function') { 
      evaled(scope.search); 
     } 
     }; 
    } 
    }; 
}) 

在refresh="vm.refresh(search)"情况callback(scope.$parent, {search: scope.search})情况下会做的伎俩。但是，如果此评估返回一个函数，则表示这是refresh="vm.refresh"大小写 - 然后它将输入if块，并使用必要的参数执行此函数。

演示：http://plnkr.co/edit/4W0SKOzpL5LUP0OAofp5?p=info

Answer 3

可以使用表达结合来评估的范围可变，并使用$attrs对象以确定所述类型。请参阅下面的例子...

的jsfiddle：http://jsfiddle.net/g4bft6rL/

JS

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

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      refresh: '&' 
     }, 
     controller: function ($scope, $attrs) { 
      $scope.$watch('refresh', function (prev, curr) { 
       $scope.text = 'refresh is a ' + getExpressionType($attrs.refresh); 
       $scope.value = $scope.refresh(); 
      }); 
     }, 
     template: "result: {{ text }} = {{ value }}" 
    }; 

    function getExpressionType (expression) { 
     // naive, but you get the idea 
     return expression.slice(-1)[0] === ')' ? 'function' : 'object'; 
    } 
}); 

function MyCtrl($scope) { 
    $scope.refresh = { a: 1 }; 
    $scope.refreshFn = function what (arg) { 
     return { 
      value: arg 
     }; 
    }; 
    $scope.param = 123; 
} 

HTML

<div ng-controller="MyCtrl"> 
    <my-directive refresh="refreshFn(param)"></my-directive> 
    <my-directive refresh="refresh"></my-directive> 
</div>