angularjs - Watch a custom directives inner html in angular -
i have global search variable used whole app
newspaper.controller("maincontroller", function($scope) { $scope.search = {query:''}; }); then have contenteditable div want bind $scope.search
app.directive('search', function() { return { restrict: 'ae', replace: true, template: '<div ng-model="query" id="search"></div>', scope: { query: '=' }, controller: function($scope) { // want watch value of element $scope.$watch('query', function(newvalue, oldvalue){ console.log(newvalue); },true); }, link: function(scope, element, attrs) { // medium js content editable framework new medium({ element: element[0], mode: medium.inlinemode }); } } }); the watch not firing when type new values div, guess im still confused on how link directive model. here's html
<nav ng-controller="maincontrollerr"> <search context="search.query"></np-search> </nav>
don't think need watch. it's bad practise use watch functions in controllers anyway makes them hard test.
here's simplified version of (i think) trying do.
index.html
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script> <script src="app.js"></script> </head> <body> <nav ng-controller="maincontroller"> <pre>{{query}}</pre> <search query="query"></search> </nav> </body> </html> app.js
var app = angular.module('plunker', []); app.controller("maincontroller", function($scope) { $scope.query = {value:''}; }); app.directive('search', function() { return { restrict: 'ae', template: '<input ng-model="query.value" id="search"/>', scope: { query: '=' } } }); edit
if want use content editable div you'd have try this:
also, see so question i've taken , adapted code create demo below. hope helps.
index.html
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script> <script src="app.js"></script> </head> <body> <nav ng-controller="maincontroller"> <pre>{{query}}</pre> <div search contenteditable="true" ng-model="query.value">{{ query.value }}</div> </nav> </body> </html> app.js
var app = angular.module('plunker', []);
app.controller("maincontroller", function($scope) { $scope.query = {value:'rrr'}; });
app.directive('search', function() { return { restrict: 'ae', require: 'ngmodel', link: function(scope, element, attrs, ctrl) { element.bind('blur', function() { scope.$apply(function() { ctrl.$setviewvalue(element.html()); }); }); element.html(ctrl.$viewvalue); } } });
Comments
Post a Comment