Question

我在同一页面中多次生成模板，但此模板控制器的功能将在整个页面上运行。如何确保它只在相应的模板范围内工作？

在这个例子中，当用户点击一个小div时，它的内容会传到另一个div。这是如何运作的？我使用jquery选择具有特定类名的单击div，并将其附加到它应该前往的div。但是，由于我多次调用此模板，该函数将选择页面中具有相同类名的所有类，而不仅仅是模板范围。

如何让选择器只查看模板的范围？

这是模板：

<div ng-controller="templateController">
      <div class="source">
        <div ng-repeat="item in info">
            <div class="content" data-value="{{item.ID}}">{{item.name}}</div>
        </div>
    </div>
    <br style="clear:both" />
    <div class="receiver"></div>
    <div>      
</div>

这是带有一些jquery函数的控制器：

angular
  .module("demo")
  .controller("templateController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.info = [
            {
                name: "john",
                ID: 1
            },
            {
                name: "Edward",
                ID: 0
            },
            {
                name: "Carl",
                ID: 2
            }
        ];

        $timeout(function () {
            $(".source .content").click(function () {
                console.log("leaving source");
                $(this).appendTo($(".receiver"));
            })
        });

        $timeout(function () {
            $(".receiver .content").click(function () {
                console.log("leaving receiver");
                $(this).appendTo($(".source"));
            })
        });

我也想回到原来的容器（如第二个功能所示，但似乎没有工作），但它只能向一个方向行进。

这是一个简单的插件，包含整个代码，因此您可以看到它有效并查看错误

enter link description here

谢谢

jquery $ selector仅适用于模板范围（AngularJS）

0 个答案: