角无法自定义指令$腕表NG-模型 [英] angular unable to $watch ng-model in custom directive

问题描述

我有自定义指令 tagPickerTag ， validationMessageTag 和办理有效 - 文章 - 元标签都有效。用法：

I have custom directives tagPickerTag, validationMessageTag and check-valid-article-meta-tags. Usage:

  <div class="my-form-group">
    <lable for="create_tags">Tags</lable>
    <tag-picker-tag ng-model="entityInfo.meta.tags" editable="true" name="tags" check-valid-article-meta-tags></tag-picker-tag>
    <validation-message-tag ctrl="form.tags"></validation-message-tag>
  </div>

这是我如何定义这3个指令

This is how I define these 3 directives

tagPickerTag：

tagPickerTag:

<div class="tag-picker-tag">
  tags
  <ui-select ng-model="$parent.ngModel" ng-disabled="! editable" multiple tagging tagging-tokens="SPACE|," tagging-label="(custom 'new' label)" title="Select tags" sortable="true" theme="bootstrap" >
    <ui-select-match placeholder="Enter Tags...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="tag in suggestedTags | filter:$select.search">
      {{tag}}
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{ngModel}}</p>
</div>



'use strict'
var helper = require('../../helper.js')
var app = angular.module('custom_directive')

app.directive('tagPickerTag', [function() {
    return {
        restrict: 'E',
        scope: {
            editable: '='
        },
        templateUrl: '/public/common/directive/tag_picker_tag.html',
        require: 'ngModel',
        link:
function(scope, element, attrs, ngModelCtrl) {
},
        controller:
['$scope',
function($scope) {
    //todo: get popular tags from server
    $scope.suggestedTags = ['superbowl', '2016election']

}]}}])

checkValidArticleMetaTags：

checkValidArticleMetaTags:

app.directive('checkValidArticleMetaTags', helper.simpleValidationDirective('article', 'meta', 'tags'))


exports.simpleValidationDirective = function(module, nestedInParent, field) {
    return function() {
        return {
            restrict: 'A',
            require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
    ctrl.$validators.checkValid = function(modelValue, viewValue) {
        var validationFunction = exports.validation[module]
        if (nestedInParent)
            validationFunction = validationFunction[nestedInParent]
        validationFunction = validationFunction[field]

        var message = validationFunction(modelValue)
        ctrl.data = exports.dataAppendedWithMessage({}, 'error', message)
        return ! message
    }
}}}}

如果你是好奇 validationFunction 上面code是（应该是无关紧要的，因为验证指令正确地得到验证错误消息）：

In case you are curious what validationFunction in above code is (it should be irrelevant, since the validation directive correctly get the validation error message):

....
,meta: {
    tags: passIfListFulfill('tags', 10, 5, 10, false)
}

var passIfListFulfill = function(fieldName, amount, min, max, required) {
    return function(input) {
        if (!input || input === [])
            return messageForNoInput(fieldName, required)

        for (var i = 0; i < input.length; i++) {
            var token = input[i]
            if (token.length < min)
                return token + ' is shorter than min: ' + min
            else if (token.length > max)
                return token + ' is longer than max ' + max
        }

        return messageForNoMoreThan(fieldName, input, amount)
    }
}

ValidationMessageTag：

ValidationMessageTag:

app.directive('validationMessageTag', [function() {
    return {
        restrict: 'E',
        scope: {
            ctrl: '=ngModel'
        },
        templateUrl: '/public/common/directive/validation_message_tag.html',
        controller:
['$scope',
function($scope) {

    $scope.$watch('ctrl.data', function(newValue, oldValue) {
        $scope.success = newValue ? newValue.success : []
        $scope.info = newValue ? newValue.info : []
        $scope.warning = newValue ? newValue.warning : []
        $scope.error = newValue ? newValue.error : []
    }, true)

}]}}])



<div class="validation-message-tag" ng-show="ctrl.$touched && ctrl.data">
  <p ng-repeat="message in success track by $index" class="validation-success">{{message}}</p>
  <p ng-repeat="message in info track by $index" class="validation-info">{{message}}</p>
  <p ng-repeat="message in warning track by $index" class="validation-warning">{{message}}</p>
  <p ng-repeat="message in error track by $index" class="validation-error">{{message}}</p>
</div>

当我进入标记 ['一'] ，在我的验证指令，我能够返回false和分配字符串一太短为Ctrl（这意味着我的验证指令是正确的）。

When I enter tags ['a'], in my validation directive, I am able to return false and assign a string "a" is too short to ctrl (which means my validation directive is correct).

但此消息没有得到传递到我的 validation_message_tag 显示。即 $观看回调不被调用。

but this message does not get passed into my validation_message_tag to display. i.e. the $watch callback is not invoked.

validtion_message_tag 工作正常和标签，所以我觉得这个问题也许我的 tagPickerTag 自定义指令的执行情况。

validtion_message_tag works fine for and tags, so i think the problem maybe the implementation of my tagPickerTag custom directive.

推荐答案

事实证明，我有一个cookie标记 isTesting 设置和忘记将其关闭。当它的测试，我只是为所有验证返回true。

It turns out that I have a cookie flag isTesting set up and forgot to turn it off. When it's testing, I simply return true for all validators.

这篇关于角无法自定义指令$腕表NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！