0

I have a div element with a controller. The div element contains an input element with an ng-model binding to an object. The input element also has an attribute directive.

If I add a scope to the attribute directive, the ng-model binding in the controller breaks. Is there a way to get this to work, or should I look for a workaround?

You can see the code running at http://jsbin.com/IvIFobU/4/.

HTML

<p>The input field below should say "foobar":</p>
<div ng-controller="fooController">
  <input ng-model="object.string" foo-attribute="callback">
</div>

JavaScript

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

app.controller("fooController", function($scope) {
      $scope.object = {
        string: 'foobar'
      };

      $scope.callback = function() {
        console.log('callback');
      };
});

app.directive('fooAttribute', function() {
  return {
    restrict: 'A',

    // This scope breaks the ng-model on the input... 
    scope: {
      callback: '&fooAttribute'
    },

    link: function(scope, element, attr) {
      element.css('background', 'lightblue');

      scope.callback();
    }
  };
});
Esseb
  • 583
  • 5
  • 9
  • do you really need the isolated scope? can access the attribute in `link` using `attr.fooAttribute` – charlietfl Oct 31 '13 at 12:43
  • Found a solution at http://stackoverflow.com/a/17599982/656578. If I get rid of the isolate scope in my attribute directive I can instead call my callback function using `scope.$apply(attr.fooAttribute);` Updated JS Bin: http://jsbin.com/IvIFobU/8/ – Esseb Oct 31 '13 at 12:48
  • or `scope[attr.fooAttribute]();` is easy to read – charlietfl Oct 31 '13 at 12:49
  • just use [`ng-model="$parent.object.string"`](http://jsbin.com/IvIFobU/11/) – Yoshi Oct 31 '13 at 12:57

0 Answers0