javascript - 当通过 `link` 属性进行动态更改时，angular 指令无法正常工作

Question

我创建了一个自定义指令。然后我尝试通过 link 属性向其中添加一个提交按钮。但是提交按钮不起作用。
另一方面，通过 template 属性添加的提交按钮工作正常。

angular.module("app", [])
	.directive("mydir", ['$compile', function($compile){
    	return {
            restrict: 'E',
            template: '<form ng-submit="submitMe()">'
                    + '    <input type="submit" value="template submit" />'
                    + '</form>',
            link: function(scope, element, attrs){
                element.append('<input type="submit" value="link submit" />');
            },
            controller: ['$scope', function($scope){
                $scope.submitMe = function(){
                    window.alert("SUBMITTED");
                }
            }]
        };
	}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
    <mydir></mydir>
</div>

jsfiddle

如何使从 link 属性在 DOM 中所做的更改正常工作

Answer 1

您在 form 元素外添加了 button，这不会触发 submit 事件，因为它在 form 之外 元素。

button 元素应该在 form 元素内部，然后只有点击 form 的提交 button 才会触发提交。

代码

element.find('form').append('<input type="submit" />');

Working Fiddle