Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html ng-app='ValidationApp'>
​
<head>
    <title>Assigning a model object after isolated scope is set doesn't work</title>
</head>
​
<body ng-controller='MyController'>
​
    <h1>MyController</h1>
    <h2>assignedObject: {{assignedObject}}</h2>
    <h2>updatedObject: {{updatedObject}}</h2>
​
    <my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
        <my-child-directive child-property='child-property-value'></my-child-directive>
    </my-parent-directive>
​
​
    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js'></script>
    <script src='app.js'></script>
</body>
​
</html>
 
var app = angular.module('ValidationApp', [])
​
app.controller('MyController', [
    '$scope',
    '$http',
    function($scope, $http) {
        // Model objects loaded on page-load
        $scope.assignedObject = {value: 'pre-update'}
        $scope.updatedObject = {value: 'pre-update'}
​
        // Mock ajax request
        setTimeout(function() {
​
            // This is what I'm ultimately trying to accomplish. However, myChildDirective is not properly
            // showing the updated value 'post-update'.
            $scope.assignedObject = {value: "post-update"}
​
            // I noticed that this line will properly update myChildDirective, but it's not an ideal solution.
            // I'm including it in the example just to show the inconsistent results in myChildDirective.
            $scope.updatedObject.value = "post-update"
​
            $scope.$apply()
            
        }, 1000)
    }
])
​
app.directive('myParentDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            assignedObject: '=',
            updatedObject: '='
        },
        template: '\
            <h1>myParentDirective</h1>\
            <h2>assignedObject: {{assignedObject}}</h2>\
            <h2>updatedObject: {{updatedObject}}</h2>\
            <div ng-transclude></div>\
            ',
        controller: function($scope, $element) {
            // Generally, exposing isolate scope is considered bad practice. However, this directive is intended
            // to be used with child directives which explicitly depend on this directive. In addition, child
            // directives will likely need their own isolated scope with two-way binding of properties on this scope.
            this._scope = $scope
        }
    }
})
​
app.directive('myChildDirective', function() {
    return {
        restrict: 'E',
        require: '^myParentDirective',
        scope: {
            childProperty: '@'
        },
        template: '\
            <h1>myChildDirective</h1>\
            <h2>childProperty: {{childProperty}}</h2>\
            <h2>assignedObject: {{assignedObject}}</h2>\
            <h2>updatedObject: {{updatedObject}}</h2>\
            ',
        link: function($scope, $element, $attrs, myParentDirective) {
            myParentDirective._scope.$watch('assignedObject', function(newValue, oldValue) {
                $scope.assignedObject = newValue
            })
            myParentDirective._scope.$watch('updatedObject', function(newValue, oldValue) {
                $scope.updatedObject = newValue
            })
        }
    }
})
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers