5

Given

  • directive D1 applied to an element E
  • directive D1 is passed a template that contains directive D2
  • directive D2 is subscribed to ngModel updates
  • directive D1 compiles template with directive D2
  • directives D1 and D2 are considered to be independent of each other
  • directives D1 and D2 have isolated scopes
  • (directive D1 might be detached from the DOM, but kept in memory)

Objective

  • make directive D2 react to scope changes of element E with applied D1 to it

index.html

<div ng-app="myApp" ng-controller="MainCtrl">
<label>
    <u>model: </u>
    <input type="text" ng-model="someValue" outer="tmpl.html"/>
    <hr/>
</label>

<script type="text/ng-template" id="tmpl.html">
    <inner test="123"></inner>
</script>

<script src="angular.js"></script>


app.js

(function (ng) {

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

app.controller('MainCtrl', [
    '$scope',
    function ($scope) {
        $scope.someValue = 'Hello, World!';
    }
])
// directive D2
.directive('inner', function () {
    return {
        restrict: 'AE',
        replace: true,
        template: '<p>{{model || "N/A"}}</p>',
        scope: { model: '=ngModel' },
        link: function (scope, element, attrs) {
            scope.$watch('model', function (newValue, oldValue) {
                if (!ng.isDefined(oldValue) && !ng.isDefined(newValue)) {
                  return;
                }
                // do stuff...
            });
        }
    };
})
// directive D1
.directive('outer', [
    '$templateCache',
    '$compile',
    function ($templateCache, $compile) {
        return {
            restrict: 'AE',
            scope: {},
            link: function (scope, element, attrs) {
                var template = $templateCache.get(attrs.outer);
                var compiled = $compile(template)(scope);
                element.parent().append(compiled);
            }
      };
    }
]);

})(angular);

Fiddle

An overly simplified version is here: http://jsfiddle.net/Nscp8/12/

Example

D1 is a popover widget that can be configured to insert HTML as its contents. D2 is a QR-code widget that watches the model and updates on change.

Problem

The ngModel binding is not done properly and I don't get updates from it. What am I doing wrong here?

1 Answer 1

3

scope: { model: '=ngModel' },

This binds the property model to the property defined in the attribute ng-model of the inner element, since you use the directive in form of an element. Your inner element does not have such an attribute.

But even if it had, the second problem would be that the parent scope of inner is the scope of outer, which is an isolate scope as well. someValue is defined in the controller´s scope, so inner has no chance to directly establish a binding with someValue, regardless of the type of binding you choose.

The solution depends on your specific needs. See this fiddle for one possible solution.

1
  • @JohnDoe D2 depends on E (well, its ng-model in fact) and the only link between those two is D1. So you can either use another D1, that is aware of D2, or another D2 (i.e. template) that is aware of the model. Apr 4, 2014 at 22:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.