1。第一种情况

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"}

但我需要在我的指令中使用这两个功能，那么我怎样才能隔离这两者。我需要知道在指令的链接功能中应用刷新范围是对象或功能。

Answer 1

这是一个棘手的情况。在这种情况下，您可以检查表达式refresh属性的类型。但是，您需要在$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 2

您可以使用表达式绑定来评估范围变量，并使用python对象来确定类型。请参阅下面的示例...

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

JS

$attrs

HTML

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;
}

Answer 3

你可以尝试类似下面的内容，我还没有测试过这段代码，只考虑提示/想法。

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

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

 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>'
    };

Angular指令为多个行为分配相同的范围

1。第一种情况

2。第二种情况

3。我的情况

3 个答案: