通過指令傳遞方法父指令

編輯：修改了代碼，每stevuu的建議，以及增加了一個plunkr到here通過指令傳遞方法父指令

我目前正在試圖有一個孩子指令調用一個方法（解析）通過另一個指令一直到父指令，但我很難用我的方法識別問題。

現在的問題似乎是，儘管resolve（）在按鈕上按預期方式被調用，但選定仍然未定義。

的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Angular: directive using &amp; - jsFiddle demo</title>  
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <style type='text/css'>   
    </style> 

</head> 
<body ng-app="myApp"> 
    <div grand-parent> 
    <span>selected: {{text}}</span> 
    <div parent resolve="resolve"></div> 
</div> 
</body> 
</html>

而且JS：

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

myApp.directive('grandParent', function() { 
return { 
    scope:{ 
     resolve: "&" 
    }, 
    link: function($scope, $element) { 
     $scope.resolve = function(selected){ 
      $scope.text = selected 
      } 
     } 
    }; 
}); 

myApp.directive('parent', function(){ 
    return{ 
     scope: { 
      resolve: "&" 
     }, 
     template: "<div child resolve='resolve'></div>" 
    }; 
}); 

myApp.directive('child', function() { 
    return { 
     scope: { 
      resolve: "&" 
     }, 
     template: "<div>Click me!</div>", 
     link: function($scope, $element) { 
      $element.on("click", function(){ 
       $scope.$apply(function(){ 
        $scope.resolve({selected: "Yahoo!!"}); 
       }); 
      }); 
     } 
    }; 
});

來源

2013-08-26 CodePrimate

首先，你不''決定''範圍''''在'grandParent'！應該讀一些像'$ scope.resolve = ...'的東西。 –

你的指令是否需要使用隔離範圍？如果不是，則在所有其他指令中都可以使用在grandParent範圍上定義的任何方法。 –

決心：「&」是一個映射。所以在這裏：

myApp.directive('grandParent', function() { 
return { 
    scope:{ 
     resolve: "&" 
    }, 
    link: function($scope, $element) { 
     $scope.resolve = function(selected){ 
      $scope.text = selected 
      } 
     } 
    }; 
});

你試圖映射「決心」來...什麼都沒有，因爲「祖父母」沒有任何ATTR名爲「解決」。

如果你想分享一些工作人員中間人的指令，你應該做這樣的事情：

視圖

<div data-grand-parent resolve="resolved()"> 
    <div data-parent ></div> 
</div>

指令

var app = angular.module('test'); 

app.directive('grandParent', function() { 
    return { 
     scope : { 
      resolve : "&" // in view we defined resolve attr 
          // with "resolve()" value, so now resolve=resolved() 
          // in grandParent scope too. 
     }, 
     controller: function($scope){ 
      this.getResolve = function(){ 
       return $scope.resolve; 
      }; 
     } 
    }; 
}); 

app.directive('parent', function() { 
    return { 
     require: "^grandParent", 
     link: function(scope, element, attr, grandParentCtrl){ 
      grandParentCtrl.getResolve()(); 
     }, 
     template : "" 
    }; 
});

控制器

angular.module('desktop') 
    .controller('MainCtrl', function ($scope, mocks) { 

    $scope.resolved = function(){ 
     console.log("calling $scope.resolved() ..."); 
    }; 

    });

輸出

calling $scope.resolved() ...

那麼，它是如何工作的？我們在我們的控制器中定義瞭解析函數，然後我們在grandParent指令中籤署這個函數來解析。 Thx到resolve : "&"我們可以將resolve（）函數映射到grandParent作用域中的「resolve」屬性。最後，我們將grandParent注入其他指令。就這樣。

我建議你閱讀Brad Green，Shyam Seshadri的angularJs。這不是最好的書，但可能更糟糕，它是免費的。你也可以找到很好的教程http://www.egghead.io/

ps。對不起，我的英語;/

來源

2013-08-26 12:10:29 Bart

通過指令傳遞方法父指令

回答

相關問題