JavaScript angular controller get value from scope from another controller

Question

I have school task. We have a HTML code like this:

<html ng-app="myTest">
<head><script type="text/javascript" src="../myScript.js"></script>
</head>
<body id="tst" class="textpage" ng-controller="TestController as testcon">

    <form class="" id="frm" ng-submit="doStuff()">
        <div class="form-group">
        {{testinfo}}
        </div>

        <div class="form-group">
        <button type="submit" id="sbtn" name="sbtn">testSubmit</button>
        </div>
    </form>

</body>
</html>

Content of javascript with name myScript.js is this:

var tester = angular.module('myTest', ['ui.mask']);
tester.controller('TestController', ['$scope', '$http', '$location', '$window', function ($scope, $http, $location, $window) {
            $scope.doStuff = function () {
                {
                    $scope.testinfo = 'unknown value';
                };
            };
        }
    ]);

I have option to add new javascript. But I am not possible to get value from $scope.testninfo. I cannot edit existing JavaScript and cannot edit HTML file. I can just add new javascript.

Is there option how to get value from $scope.testinfo in another javascript?

Thanks.

So you want to access scope value from one controller to another. What are name of these controller? 1. TestController and 2. ? — Samir Das
– Samir Das, Commented Jun 19, 2015 at 8:43
then you can use javascript to get its value <div class="form-group" id="test"> {{testinfo}} </div> var x=document.getElementById(test).innerHTML — Shubham Nigam
– Shubham Nigam, Commented Jun 19, 2015 at 8:53
But this DIV have no ID and on for are many DIVs where class="form-group". Maybe there is way how to inject javascript? Or replace original javascript with mine? — Marek Janáč
– Marek Janáč, Commented Jun 19, 2015 at 9:31

Rahul G Nair · Accepted Answer · 2015-06-19 08:46:48Z

1

You can use broadcast

From controller 1 we broadcast an event

$scope.$broadcast('myEvent',anyData);

controller 2 will receive our event

$scope.$on('myEvent', function(event,anyData) { 
        //code for controller 2
    });

here anyData represent your object to be passed

edited Jun 19, 2015 at 8:46

answered Jun 19, 2015 at 8:43

Rahul G Nair

1,38610 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marek Janáč Over a year ago

Thanks for answer, but I cannot do this. I can just add new javascript.

S Vinesh · Accepted Answer · 2015-06-19 08:43:03Z

0

Use ng-model.

<div class="form-group">
    <input type="text" ng-model="testinfo">
 </div>

answered Jun 19, 2015 at 8:43

S Vinesh

5391 gold badge5 silver badges15 bronze badges

Comments

Alfred Brockötter · Accepted Answer · 2015-06-19 10:02:25Z

I dont think it is possible without appending the existing javascript/html. Because the $scope of the TestController cannot be accessed from another controller (file).

If you COULD append the HTML you could use the $rootscope, in that way the value, which is set by the TestController is accessible from another controller. Or you can add a Global app value. I created a fiddle which show the two options: https://jsfiddle.net/Appiez/wnyb9pxc/2/

    var tester = angular.module('myTest', []);
tester.value('globalVar', { value: '' });
tester.controller('TestController', ['$rootScope', '$scope', '$http', '$location', '$window', 'globalVar', function     ($rootScope, $scope, $http, $location, $window, globalVar) {
        $scope.doStuff = function () {
            {
                $rootScope.testinfo = 'this is the new value';
                globalVar.value = 'a global value';
            };
        };
    }
]);

tester.controller('TestController2', ['$rootScope', '$scope', 'globalVar', function ($rootScope, $scope, globalVar) {

            $scope.doStuff2 = function () {
            {
                alert($rootScope.testinfo);
                alert(globalVar.value);
            };
        };
    }
]);

Sharkparty · Accepted Answer · 2015-06-19 12:48:58Z

0

This is what services are for in angular. They ferry data across controllers. You can use NG's $broadcast to publish events that contain data, but Providers, Services, and Factories are built to solve this.

angular.module('krs', [])
.controller('OneCtrl', function($scope, data){
    $scope.theData = data.getData();
})
.controller('TwoCtrl', function($scope, data){
    $scope.theData = data.getData();
})
.service('data', function(){
    return {
        getData: function(){
            return ["Foo", "Bar"];
        }
    }
});

Here's a fiddle to help get you into the swing of things. Good luck in school!

answered Jun 19, 2015 at 12:48

Sharkparty

1761 silver badge4 bronze badges

Collectives™ on Stack Overflow

JavaScript angular controller get value from scope from another controller

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related