如何在自定义指令中获取ng-model值 [英] How to get ng-model value inside custom directive

问题描述

我在SO上进行了搜索，并尝试了找到的答案，但似乎无法从我的自定义指令的ngModel中获取模型值.

I've searched here on SO and tried the answers I found, but I can't seem to get the model value out of the ngModel of my custom directive.

这是指令

/*
 *usage: <markdown ng:model="someModel.content"></markdown>
 */
breathingRoom.directive('markdown', function () {
    var nextId = 0;
    return {
        require: 'ngModel',
        replace: true,
        restrict: 'E',
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link:function (scope, element, attrs, ngModel) {

            var editorUniqueId = nextId++;
            element.html($('<div>' +
                '<div class="wmd-panel">' +
                '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                '<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">{{modelValue()}}' +
                '</textarea>' +
                '</div>' +
                '<div id="wmd-preview-' + editorUniqueId + '" class="wmd-panel wmd-preview"></div>' +
                '</div>'));

            var converter = new Markdown.Converter();

            var help = function () {
                // 2DO: add nice modal dialog
                alert("Do you need help?");
            };

            var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                handler: help
            });

            editor.run();


            // local -> parent scope change (model)
            jQuery("#wmd-input-" + editorUniqueId).on('change', function () {
                var rawContent = $(this).val();
                ngModel.$setViewValue(rawContent);
                scope.$apply();
            });

            // parent scope -> local change
            scope.modelValue = function () {
                console.log('modelvalue - ', ngModel.$viewValue);
                return ngModel.$viewValue;
            };
        }
    };
});

这是HTML

<markdown ng-class="{error: (moduleForm.Description.$dirty && moduleForm.Description.$invalid) || (moduleForm.Description.$invalid && submitted)}"
          id="Description" 
          name="Description" 
          placeholder="Description" 
          ng-model="module.description" 
          required></markdown>   

这里的问题是输出很简单

The problem here is that the output is simply

{{modelValue()}}

---

我还尝试创建私有方法

---

I also tried creating a private method

function getModelValue() {
    console.log(ngModel.$viewValue);
    return ngModel.$viewValue;
}

，然后将一个模板行更改为

and then change the one template line to

'<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">' + getModelValue() +

但是输出是

NaN

我要去哪里错了?

如果有关系，这是我的脚本的顺序(不包括供应商脚本)

if it matters, here's the order of my scripts (not including vendor scripts)

<script src="app.js"></script>
<script src="directives/backButtonDirective.js"></script>
<script src="directives/bootstrapSwitchDirective.js"></script>
<script src="directives/markdownDirective.js"></script>
<script src="directives/trackActiveDirective.js"></script>
<script src="services/alertService.js"></script>
<script src="services/roleService.js"></script>
<script src="services/moduleService.js"></script>
<script src="services/changePasswordService.js"></script>
<script src="services/userService.js"></script>
<script src="controllers/usersController.js"></script>
<script src="controllers/userController.js"></script>
<script src="controllers/moduleController.js"></script>
<script src="controllers/modulesController.js"></script>

推荐答案

您插入的HTML尚未编译.仅将其移入模板或使用ng-transclude进行调查是最简单的.这是将其移入模板的示例.

The HTML your inserting isn't getting compiled. It's easiest just to move it into your template, or investigate using ng-transclude. Here's an example of moving it into your template.

朋克车

breathingRoom.directive('markdown', function () {
    var nextId = 0;
    return {
        require: 'ngModel',
        replace: true,
        restrict: 'E',
        template: '<div class="pagedown-bootstrap-editor"><div class="wmd-panel">' +
                '<div id="wmd-button-bar-{{editorUniqueId}}"></div>' +
                '<textarea class="wmd-input" id="wmd-input-{{editorUniqueId}}">{{modelValue()}}' +
                '</textarea>' +
                '</div>' +
                '<div id="wmd-preview-{{editorUniqueId}}" class="wmd-panel wmd-preview"></div>' +
                '</div></div>',
        link:function (scope, element, attrs, ngModel) {

            scope.editorUniqueId = nextId++;

            // parent scope -> local change
            scope.modelValue = function () {
                console.log('modelvalue - ' + ngModel.$viewValue);
                return ngModel.$viewValue;
            };
        }
    };
});

这篇关于如何在自定义指令中获取ng-model值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！