如何在Jquery的replaceWith之后在AngularJS中重新加载自定义指令?

时间:2015-03-15 20:44:46

标签: javascript jquery angularjs

我正在尝试重置输入元素,而我以前的方式是使用JQuery的replaceWith方法。 这是我的HTML

<div ng-controller="MyCtrl">attach.file = {{attach.file.name}} <br>
    <input type="file" id="file_" file-model="attach.file" file-model>
    <br>
    <button clear>Clear input</button>
</div>

这是我的javascript

var myApp = angular.module('myApp', []);

myApp.directive('clear', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                control = $("#file_");
                control.replaceWith(control.val('').clone(true));
                scope.attach.file = null;
                scope.$apply();
            });
        }
    };
});

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.controller('MyCtrl', function MyCtrl($scope) {
    $scope.attach = {
        file: null
    };
});

问题是在使用它之后,我的自定义指令不会再调用我的角度模型中的文件。

我对JQuery和AngularJS都不熟悉。 有没有办法重新加载自定义指令?

以下是此方案的小提琴:http://jsfiddle.net/hjqsjrro/4/

由于

1 个答案:

答案 0 :(得分:0)

我举了一个例子来解决这个问题。

您可以尝试编译DOM,然后事件将返回执行。请寻找:

How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?