Question

我有一个简单的指令与transcluded html。我希望能够将指令范围参数注入transclude。我在plunker中写了一个简单的例子： https://plnkr.co/edit/jqyiQdgQxbeTrzyidZYF?p=preview

我知道在角度4中可以做到，但我无法在angularjs中找到一个好方法。

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.6.2" 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>

＆＃13;

真的会提供一些帮助。

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

Answer 1

这是一个有关你的例子的工作人员。 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

希望这能帮到你

angularjs - access从hosting指令转换html作用域

1 个答案: