Geek asks and answers

Angularjs - ngModel. $ SetViewValue is not a function

Here is my plunker, and the code that I cannot run starts on line 32 http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

I am trying to apply the equivalent of the markdown filter to a directive ... I created a filter and tested it manually, and it works this way, but I should use the filter only conditionally when the content type on the directive is set to markdown.

I am trying to accomplish this by updating ng-model →> ngModel.$setViewValue(html), but I am getting ngModel error message. $ setViewValue is not a function .. that makes me realize that the controller is not recognized, although this is required by the directive.

Here is the working controller:

var app = angular.module('testOne', ["ngResource", "ngSanitize"]);

app.controller('testOneCtrl', function ($scope) {

$scope.product = {
    id:12,
    name:'Cotton T-Shirt, 2000',
    description:'### markdown\n - list item 1\n - list item 2',
    price:29.99
};

}); 

app.directive("myText", function ($parse) {
return {
    restrict: "E",
    require: "?ngModel",
    scope:{
        css: "@class", type: "@type"
    },
    controller: function ($scope, $element, $attrs) {},
    templateUrl: "template.html",
    compile: function(elm, attrs, ngModel){

            var expFn = $parse(attrs.contentType + '.' + attrs.value);
            return function(scope,elm,attrs){
                scope.$parent.$watch(expFn, function(val){
                    scope.exp = { val: val };

                if ( attrs.type == 'markdown'){
                    var converter = new Showdown.converter();
                        var html = converter.makeHtml(val);
                        //scope.exp.val = html;

                        ngModel.$setViewValue(html);
                        ngModel.$render();
                }

                })

                scope.$watch('exp.val', function(val){
                    expFn.assign(scope.$parent, val)
                })
            }
    }
}
})

, . ( , , , ng-)

/*
app.filter('markdown', function ($sce) {
    var converter = new Showdown.converter();
    return function (value) {
        var html = converter.makeHtml(value || '');
        return $sce.trustAsHtml(html);
   };
});
*/


<div ng-class="{{css}}"
        ng-click="view = !view" 
        ng-bind-html="exp.val">
</div>


<div>
    <textarea rows="4" cols="30" ng-model="exp.val"></textarea>
</div>

:

    <mb-text ng-cloak 
        type="markdown"
        content-type="product"
        value="description"
        class="test-one-text-2">
    </mb-text>
+3
1

ngModel ?

  • require 4- . . , .

  • , require ({ require: 'ngModel' }) ({ require: '^ngmodel' }). ( ).

ngModel?

, .

angular. :

jQuery/jqLite

() - . , ngController. camelCase, (, "ngModel" ).

:

 var ngModel = elm.find('textarea').controller('ngModel');

:

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

:

<div ng-class="{{css}}" ng-bind-html="exp.preview"> </div>

<div>
    <textarea rows="4" cols="30" ng-model="exp.val"></textarea>
</div>


app.directive("myText", function($parse) {
  return {
    restrict: "E",
    templateUrl: "template.html",
    scope: {
      css: "@class",
      type: "@type"
    },
    compile: function(elm, attrs) {

      var expFn = $parse(attrs.contentType + '.' + attrs.value);

      return function(scope, elm, attrs) {

        scope.exp = {
          val: '',
          preview: null
        };

        if (attrs.type == 'markdown') {
          var converter = new Showdown.converter();

          var updatePreview = function(val) {
            scope.exp.preview = converter.makeHtml(val);
            return val;
          };

          var ngModel = elm.find('textarea').controller('ngModel');
          ngModel.$formatters.push(updatePreview);
          ngModel.$parsers.push(updatePreview);
        }

        scope.$parent.$watch(expFn, function(val) {
          scope.exp.val = val;
        });

        scope.$watch('exp.val', function(val) {
          expFn.assign(scope.$parent, val);
        });
      };
    }
  };
});
+4

More articles:


All Articles