angularjs - 從託管指令訪問transclude html作用域

我有一個簡單的指令，帶有transcluded html。我希望能夠向transclude注入指令作用域參數。我plunker寫了一個簡單的例子： https://plnkr.co/edit/jqyiQdgQxbeTrzyidZYF?p=preview angularjs - 從託管指令訪問transclude html作用域

我知道在角4是可以做到的，但我不能找到一個很好的辦法做到這一點的angularjs。

// Code goes here 
 

 
var app = angular.module("app", []); 
 

 
app.controller("mainCtrl", function($scope) { 
 
    $scope.users = ["tal", "oren", "orel", "shluki"]; 
 
    
 
    $scope.deleteUser = (user) => {alert("trying to delete", user);} 
 
}); 
 

 
app.directive('myList', function myList() { 
 
    return { 
 
     restrict: 'E', 
 
     transclude: true, 
 
     template: "<div><table><tr ng-repeat='item in collection'><td> This is inside myList - user name: {{item}} <ng-transclude></ng-transclude></td></tr></table></div>", 
 
     scope: { 
 
      collection: "=" 
 
     }, 
 
     replace: true 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app" ng-controller="mainCtrl"> 
 
     <h1>Hello Plunker!</h1> 
 
     <my-list collection="users"> 
 
     <h2>This is transclude</h2> 
 
     <button ng-click="deleteUser(user)">Delete user: {{user ? user : "User name should be here"}}</button> 
 
     </my-list> 
 
    </body> 
 

 
</html>

真的會appreicate一些幫助。

plunker：https://plnkr.co/edit/jqyiQdgQxbeTrzyidZYF?p=preview

來源

2017-08-08 Tal Humy

這裏的工作plunker你的榜樣。 http://plnkr.co/edit/BjSowyQdLXd0xoCZFqZ6?p=preview

這個想法是把它作爲內容傳遞而不是html作爲字符串。 $ compile是在這裏，因爲這個鏈接是在ng-repeats已經跨越了自己的模板之後完成的。

var template = '<h1>I am foo</h1>\ 
        <div ng-repeat="item in users">\ 
        <placeholder></placeholder>\ 
        <hr>\ 
        </div>'; 
    var templateEl = angular.element(template); 

    transclude(scope, function(clonedContent) { 
    templateEl.find("placeholder").replaceWith(clonedContent); 

    $compile(templateEl)(scope, function(clonedTemplate) { 
     element.append(clonedTemplate); 
    }); 
    });

如果你想要的是什麼問題，你應該檢查一下詳細的解答在這裏好好解釋：Pass data to transcluded element

希望這有助於你出去

來源

2017-08-08 13:01:38

首先，非常感謝你的幫助。我首先想到了它，但唯一的問題是我放棄了容器範圍。如果我嘗試從主頁面訪問一些數據，我不能再這樣做了。在我的示例中實現的解決方案不會調用deleteUser函數，因爲範圍已被替換。 –

angularjs - 從託管指令訪問transclude html作用域

回答

相關問題