Angular - Directive not working

Question

I am new to Angular. Not sure why directive is not working below. Searched some articles. Nothing helps

angular.module('oneApp', []).controller('OneAppController', function($scope){ //Some Logic }).directive('dvReplaceText', ['$interval', '$compile', function($interval, $compile) { return { restrict: 'A', link: function(scope, element, attr) { scope.$watch(scope.data, function(value) { element.html(value); }); } } }]);

HTML:

<body ng-app="oneApp"> <div ng-controller="OneAppController"> <input class="input-data-box" ng-model="data" dv-replace-text=""/> </div> </body>

JSFiddle Link

aside from you not having the Fiddle set up right (change to No Wrap - in <head>)... What is this supposed to do? you have the directive assigned to an <input> element, and then are trying to change the html of the element, but <input> doesn't have an html property. — Claies
– Claies, Commented Jun 18, 2015 at 7:14

Michael Kang · Accepted Answer · 2015-06-18 07:14:40Z

4

Should be:

scope.$watch('data', function(value) { ... });

answered Jun 18, 2015 at 7:14

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikash · Accepted Answer · 2015-06-18 07:17:44Z

You should change $watch like this :

scope.$watch('data', function(value) { element.html(value); console.log(value); });

Demo : http://jsfiddle.net/vikashvverma/LzLe71ft/6/

Anik Islam Abhi · Accepted Answer · 2015-06-18 07:17:33Z

Try like this

angular.module('oneApp', []).controller('OneAppController', function($scope){ //Some Logic }).directive('dvReplaceText', ['$interval', '$compile', function($interval, $compile) { return { restrict: 'A', link: function(scope, element, attr) { scope.$watch("data", function(value) { //element.value(value); console.log(value); }); } } }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="oneApp"> <div ng-controller="OneAppController"> <input class="input-data-box" ng-model="data" dv-replace-text=""/> </div> </body>

PavanAsTechie · Accepted Answer · 2015-06-18 07:40:01Z

var app=angular.module('myApp', []); app.controller('OneAppController', function($scope){ //Some Logic console.log("data loaded"); }); app.directive('dvReplaceText', function() { return { link: function(scope, element, attr) { scope.$watch(scope.data, function(value) { element.html(value); }); } } });

HTML

<div ng-controller="OneAppController"> <input class="input-data-box" ng-model="data" dv-replace-text/> </div>

Here is the working model JSFIDDLE LINK

Collectives™ on Stack Overflow

Angular - Directive not working

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related