angularjsangularjs-directiveangularjs-scopeangularjs-model

Watch a custom directives inner html in angular


I have a global search variable that is used by the whole app

newspaper.controller("MainController", function($scope) {
    $scope.search = {query:''};
});

Then I have a contenteditable div that I want to bind to $scope.search

app.directive('search', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div ng-model="query" id="search"></div>',
        scope: { 
            query: '='
        },
        controller: function($scope) {
            // I want to watch the value of the 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 is not firing when I type new values into the div, I guess Im still confused on how to link a directive with a model. Here's the HTML

  <nav ng-controller="MainControllerr">
    <search context="search.query"></np-search>
  </nav>

Solution

  • Don't think you need the watch. It's bad practise to use watch functions in your controllers anyway as it makes them really hard to test.

    Here's a simplified version of what (I think) your trying to do.

    DEMO

    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 you really want to use a content editable div you'd have to try something like this:

    Also, see this SO question from which I've taken and adapted code to create the demo below. Hope it helps.

    DEMO2

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