Question

我有一个指令，在这个指令中我们按你所见编译 ngRepeat 。

我的问题是：

我无法从控制器调用$ scope.delete（），我也不知道如何在我的指令中编译它。

注意：运行示例

＆＃13;

        var app = angular.module("app", []);

        app.controller("ctrl", function ($scope, $http) {
            var root = "http://jsonplaceholder.typicode.com";

            $scope.list = [];

            $http.get(root + "/users").success(function (data) {
                $scope.list = data;
            });

          ///i can't call this scope
            $scope.delete = function (item) {
                alert("delete called");
            }
        });

        app.directive("mydata", ["$compile", "$filter", function ($compile, $filter) {
            return {
                restrict: "A",
                scope: {
                    list: "="
                },
                link: function (scope, element) {
                    var ngRepeat = element.find(".repeat").attr("ng-repeat", "item in list");
                    $compile(ngRepeat)(scope);
                }
            }
        }]);

＆＃13;

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
</head>
<body>
    <ul id="parent" mydata data-list="list">
        <li class="repeat">
            {{item.name}}
            <button ng-click="delete()">delete</button>
        </li>
    </ul>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
</html>

＆＃13;

Answer 1

不知道你为什么要尝试做这样的事情但是你的代码的快速解决方案是使用控制器的范围编译ngRepeat而不是指令范围;

$compile(ngRepeat)(scope.$parent);

由于你在my-data指令上创建了一个孤立的范围，你的删除（）不会被激活。 delete（）方法不会被继承。

有关隔离范围和范围继承的更多概念，请检查https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive和https://docs.angularjs.org/guide/scope

如何在ngRepeat上编译范围ngClick in指令

1 个答案: