AngularJS Services: Constants

by jhoguet

HTML

<div ng-app="app" ng-controller="Controller as children">
    <strong>{{children.firstChild.name}}</strong> <small>according to controller</small>
    <div ng-if="children.firstChild">
        <div test child="children.firstChild"></div>
    </div>
    <script type="text/ng-template" id="test-child.html">
        <strong>{{child.name}} </strong><small>according to test before if</small>
        <div ng-if="child">
            <strong>{{child.name}} </strong><small>according to test after if</small>
            <div test2 child="child"></div>    
        </div>
    </script>
    <script type="text/ng-template" id="test-child2.html">
        <strong>{{child.name}}</strong> <small>according to test2</small>
        <br />
        <button ng-click="setChild()">set child</button
    </script>
</div>

JavaScript

angular.module('app', [])
.controller('Controller', function ($scope) {
    this.firstChild = {
        name: 'Lance'
    };;
})
.directive('test', function () {
    return {
        scope: {
            child: '='
        },
        templateUrl : 'test-child.html'
    };
})
.directive('test2', function () {
    return {
        scope: {
            child: '='
        },
        templateUrl : 'test-child2.html',
        link: function ($scope, element) {
            $scope.setChild = function () {
                $scope.child = {
                    name: 'Lana'
                };
            };
        }
    };
});;