Question

我编写了一个简单的基于AngularJS的HTML。它有一系列预定义项目，并提供了Add和Delete按钮，用于添加或删除列表中的项目。 Delete按钮是一个自定义指令。下面是代码示例：（<delete-button>是自定义指令）

HTML

项目

    <p>
        <label>Price</label> <input type="text" ng-model="price" />
    </p>
    <p>
        <button class="btn btn-success" ng-click="addItems()">Add</button>
    </p>
    <table class="table table-striped table-hover">
        <th>Item Name</th>
        <th>Item Price</th>
        <th>Action</th>
        <tr ng-repeat="item in items|filter:name|orderBy:predicate">
            <td>{{item.name}}</td>
            <td>{{item.price | currency}}</td>
            <td><delete-button>Remove</delete-button></td>
        </tr>

    </table>

的Javascript

$scope.addItems = function() {
        $scope.start();
        var newItem = {name: $scope.name , price: $scope.price};
        $scope.items.push(newItem);
        $scope.complete();
    };
myModule.directive("deleteButton", function() {
    return {
        restrict: "E",
        transclude: true,
        template: "<button class='btn btn-warning' ng-click='removeItem(item)' ng-transclude></button>"
    };
});

代码在Chrome和Firfox上正常运行，但当我尝试在IE 8上运行时，它在控制台中提供了"Error: Unknown Runtime Error"。没有其他日志。

Answer 1

似乎IE 8无法处理自定义指令。删除自定义指令后代码运行正常。 IE documentation指出，对于自定义元素指令，我们需要调用document.createElement('custom-element')。

Answer 2

您应该阅读此article about using Angular with IE8 and earlier。但是代码的问题可能是你将指令限制为一个元素，在IE8中你不能这样做，而是使用Attribute。

myModule.directive("deleteButton", function() {
    return {
        restrict: "A",
        transclude: true,
        template: "<button class='btn btn-warning' ng-click='removeItem(item)' ng-transclude></button>"
    };
});

IE 8中使用AngularJS的未知运行时错误

2 个答案: