Skip to content

Scope function not working in ui-view default transclude content #734

Closed
@vavrecka

Description

@vavrecka

When I have two states nested. Lets call them about and about.stateone. Now, in both I have controller which has function called Change. When I go to the child scope, function works, but now when I go back to the parent, the function does not work.

Code:

 $stateProvider
            .state('about', {
                url: '/about',
                templateUrl: '/partials/about.html',
                controller: ['$scope', function ($scope) {
                    $scope.test = '1';

                    $scope.Change = function () {
                        console.log('cahgne 1');
                        $scope.test = 'change 1111';
                    };
                }]
            })
            .state('about.stateone', {
                url: '/one',
                template: '<div>' +
                    '<p>test: {{test}}</p>' +
                    '<button ng-click="Change()">Change 2</button>' +
                    '</div>',
                controller : ['$scope', function ($scope) {
                    console.log('in ctrl 2');
                    $scope.test = '2';

                    $scope.Change = function () {
                        console.log('cahgne 2');
                        $scope.test = 'change 2222';
                    };
                }]
            })

And the HTML of about state:

        <ui-view>
                <p>Test: {{test}}</p>
                <button ng-click='Change()'>Change</button>
        </ui-view>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions