Как получить значение ng-model внутри пользовательской директивы

Ответ 1

В HTML-формате ваша вставка не скомпилирована. Легче всего переместить его в свой шаблон или исследовать с помощью ng-translcude. Здесь приведен пример перемещения его в ваш шаблон.

http://plnkr.co/edit/cidTZLY9GpESMvCcHKBU?p=preview

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;
            };
        }
    };
});

Ответ 2

Фактически вы не решали вашу модель, поскольку выражение {{modelValue()}} было только частью строки HTML, которую вы строили в функции ссылок.

Вы должны переместить разметку редактора в template, чтобы вы могли привязываться к ng-model.

Предполагая, что цель состоит в том, чтобы создать необходимую разметку HTML для Markdown Editor, а затем показать предварительный просмотр преобразованной метки, я бы разделил ее на две роли:

• Директива для пользовательской разметки
• Фильтр для фактического преобразования значения в уценку:

Разметка:

<div ng-app="app" ng-controller="DemoCtrl">
    <h3>Markdown editor</h3>
    <markdown-editor ng-model="markdown"></markdown-editor>
</div>

JavaScript:

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

app.filter('markdown', function () {
    return function (input) {
        return input.toUpperCase(); // this is where you'd convert your markdown
    };
});

app.directive('markdownEditor', function () {
    return {
        restrict: 'E',
        scope: {
            ngModel: "="
        },
        template:
            '<div>' +
            '<textarea ng-model="ngModel"></textarea>' +
            '<div class="preview">{{ ngModel | markdown }}</div>' +
            '</div>'
    };
});

app.controller('DemoCtrl', function ($scope) {
    $scope.markdown = "**hello world**";
});

Область = устанавливает двухстороннюю привязку к свойству, переданному в ng-model и {{ ngModel | markdown }}, передает значение ngModel в фильтр markdown.

http://jsfiddle.net/benfosterdev/jY3ZK/

Ответ 3

Самый простой способ:

Если переменная ngModel находится на верхнем уровне области

link: function(scope, elem, attrs) {
    if (attrs.ngModel) {
        var myModelReference = scope[attrs.ngModel];
    }
}

Если ngModel ссылается на свойство, глубоко вложенное в область (лучший способ)

(так что для scope.prop1.prop2, attrs.ngModel будет "prop1.prop2" ), и поскольку вы не можете просто искать scope['prop1.prop2'], вам нужно вникнуть, переведя строковый ключ в фактические вложенные ключи.

Для этого я рекомендую функцию Lodash _.get()

link: function(scope, elem, attrs) {
    if (attrs.ngModel) {
        var myModelReference = _.get(scope, attrs.ngModel);
    }
}

Ответ 4

Посмотрите angular parse сервис. Он позволяет получить и установить значение свойства, на которое ссылаются в ng-модели.

link: function(scope, elem, attrs) {
    var getter = $parse(attrs.ngModel);
    var setter = getter.assign;
    var value = getter(scope);
    setter(scope, 'newValue');
}