Question

我有一些元素具有必需，minlength，pattern等验证。这些验证通过javascript从数据库动态加载到元素。

我会尽量向你展示我的组件。仅使用此代码可能不会导致相同的行为。

在模板上，当我尝试更改下拉选项时，onTaxNoChanged（）函数会触发两次。这只是问题的一个例子。我还有一些其他类似的元素，它们会在ng-blur上发生两次事件。

控制器：

myApp.controller('Controller', function ($scope, $state, PageHelper) {
    //Other codes

    $scope.page_id = $state.params.module + $state.params.submodule;
    $scope.pageHelper = PageHelper;
    $scope.pageHelper.loadPage($scope.page_id);

    //Other codes
}

模板：

<div ng-controller="Controller" id="{{page_id}}" class="page">

    <!-- Other Elements -->

    <fieldset class="form-group">
        <label class="control-label" for="sirketTipi">
            {{'sirketTipi'|translate}}
        </label>

        <select class="form-control"
            id="sirketTipi"
            name="sirketTipi"
            ng-model="fields.partner.sirketTipiLOV"
            ng-change="onTaxNoChanged()"
            ng-options="lov.lovdisplayvalue for lov in pageHelper.components['sirketTipi'].items track by lov.lovvalue.lovid">
            <option value="">{{'PLEASE_SELECT' | translate}}</option>
        </select>
    </fieldset>

    <!-- Other Elements -->

</div>

PageHelper工厂：

var myApp= angular.module('myApp');

myApp.factory('PageHelper', function ($timeout, $rootScope) {

    var PageHelper = {};

    //Other Codes

    PageHelper.loadPage = function (pageId, callback, isForcedFetchTXDR) {

        //After some operations

        $timeout(function () {
            preparePageComponents(PageHelper.screens[pageId]);
        });
    }

    var preparePageComponents = function (screen) {

        //After some operations

        $timeout(function () {
            $rootScope.$broadcast('PREPARE_FORM_VALIDATION');
        });
    }

form-group指令：

angular.module('myApp').directive('formGroup', function ($rootScope, $compile, $timeout) {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
            scope.$on('PREPARE_FORM_VALIDATION', function () {

                //var contents = element.contents();
                //element.children().remove();
                //element.append(contents);

                // Some changes to the element object

                $compile(element)(scope);
            }
        }
    }
}

我知道问题的出现是因为form-group指令的广播函数（PREPARE_FORM_VALIDATION）末尾的$ compile操作。它导致元素编译两次，但如果我删除它，我的验证逻辑完全停止工作。

正如您在广播功能的评论中看到的那样，我尝试了解决问题时在互联网上找到的解决方案。 “element.children（）。remove（）”技术阻止我的元素使某些函数正常工作。我试图在预链接上放置广播功能，但这没用。

是否有另一种方法可以对广播函数中的元素进行编译？

ng-blur和ng-change两次触发

0 个答案: