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'>
​
    <h2>MyController.assignedObject: {{assignedObject}}</h2>
    <h2>MyController.updatedObject: {{updatedObject}}</h2>
​
    <my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
        <my-child-directive></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: '\
            <h2>myParentDirective.assignedObject: {{assignedObject}}</h2>\
            <h2>myParentDirective.updatedObject: {{updatedObject}}</h2>\
            <div ng-transclude></div>\
            ',
        controller: function($scope, $element) {
            this.assignedObject = $scope.assignedObject
            this.updatedObject = $scope.updatedObject
        }
    }
})
​
app.directive('myChildDirective', function() {
    return {
        restrict: 'E',
        require: '^myParentDirective',
        scope: false,
        template: '\
            <h2>myChildDirective.myParentDirective.assignedObject: {{myParentDirective.assignedObject}}</h2>\
            <h2>myChildDirective.myParentDirective.updatedObject: {{myParentDirective.updatedObject}}</h2>\
            ',
        link: function($scope, $element, $attrs, myParentDirective) {
            $scope.myParentDirective = myParentDirective
        }
    }
})
​
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers