AngularJS - 从动态创建的元素调用函数

时间:2016-05-31 14:30:52

标签: angularjs angularjs-directive

我正在angularJS中开发一个查询构建器。我正在定制angular-query-builder

代码结构(仅显示与上下文相关的代码)

base.html文件

<query-builder group="filter.group"></query-builder>

querybuilder.html

<select ng-options="t.name as t.name for t in fields" ng-model="rule.field" execute-change="setValidation()" class="form-control input-sm"><option value="">--Select Filter--</option></select>

<select style="margin-left: 5px" ng-options="c.name as c.name for c in conditions" ng-model="rule.condition" class="form-control input-sm"></select>

<input type="text" ng-model="rule.data" class="form-control input-sm condition-inp" />

controller.js

$scope.setValidation = function () {
     console.log('Triggred')
 }

directive.js

.directive('queryBuilder', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            group: '='
        },
        templateUrl: 'querybuilder.html',
        compile: function (element, attrs) {
            var content, directive;
            content = element.contents().remove();
            return function (scope, element, attrs) {

                element.on('change', function (e) {
                    scope.$apply(attrs.executeChange);
                });

            }
        }
    }
}]);

我想要的是在querybuilder.html中提到的第一个下拉列表中选择项目时,我需要在相应的输入框中添加验证。 即,如果选择的项目是日期,则输入框必须是日期选择器,如果是电话号码,则输入框应为整数。

我尝试使用setValidation中的controller.js函数执行此操作但该功能未被触发。

1 个答案:

答案 0 :(得分:0)

我希望这与表单的父级一起使用,因为在命名表单上调用$ setValidity输入myFrom.nameOfInput。$ setValidity。

如果是这样,你可以将表单传递给指令或者将validitor函数作为参数传递给指令,就像scope一样,现在只取组,让它也使用parentValidator并让它成为父控制器中的一个函数来设置有效性。