1

after trying the entire day here I am...

Angularjs newbie, though decent knowledge in js, I believe for some of you this question should be a no-brainer.

Suppose we have the following angular mini app:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="ctrl">
        <h1 ng-click="toggle()">{{firstname}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('ctrl', function($scope) {
            $scope.firstname = "adam";
            $scope.toggle = function() {
                $scope.firstname = "eva";
            }
        });
    </script>
</body>
</html>

I am able to register further controller afterwards (i.e. from the console), as follows:

// ought to overwrite the behaviour of the old one
app.controller('ctrl', function($scope) {
    $scope.firstname = "adam";
    $scope.toggle = function() {
        $scope.firstname= $scope.firstname == 'adam' ? 'eva' : 'adam';
    }
});

How on earth do I invoke programmatically the constructor of the latter controller in order to get new behaviour for the toggle function (preferable from the console)???

Edit

Accessing the scope of the controller and assign toogle to the new function does not really help in case the function refers to variables declared inside the constructor but outside the functions body.

crishushu
  • 435
  • 2
  • 4
  • 14
  • This seems similar, inspect your dom then you should just be able to use a selector and run the toggle function http://stackoverflow.com/questions/22795628/calling-angular-controller-function-from-browser-console – MannfromReno Feb 02 '17 at 19:03
  • Thanks for the hint. But I am not referring to the scope access of a controller. I am wondering how the constructor gets executed so that ```$scope.toggle``` is assigned to the new function. I've seen that post before btw. – crishushu Feb 02 '17 at 19:07
  • I was playing around with this: `angular.element(document.querySelector('.my-class')).scope().toggle = function () { alert('ok'); }` where `my-class` would be a class for your `

    ` tag and this overrides the toggle functionality, but I don't know if that's what you were looking for

     – MannfromReno Feb 02 '17 at 19:31
  • Please check my edits. My goal actually is to execute the constructor of the snd controller – crishushu Feb 02 '17 at 19:38

1 Answers1

1

You can do something like this to assign the controller's constructor to a variable:

var ctrl = function($scope, t) {
    $scope.firstname = "adam";
    $scope.toggle = function() {
        $scope.firstname= $scope.firstname == 'adam' ? 'eva' : 'adam';    
    }
    console.log("Controller was Instantiated!!!");
};

and then instantiate that using the injector as follows:

var injector = angular.element($0).injector();
injector.instantiate(ctrl, { 
    $scope: injector.get("$rootScope"),
    t: injector.get("t")
});

(Assuming the service t has already been registered.)

Matthew Cawley
  • 2,688
  • 1
  • 8
  • 19
  • ```angular.element($0).inject()``` VM68:1 Uncaught TypeError: angular.element(...).inject is not a function at :1:21 – crishushu Feb 03 '17 at 15:39
  • Try `angular.element($0).injector()` instead. – Matthew Cawley Feb 03 '17 at 15:58
  • Sorry, my fault... However I still don't know how to inject methods that profits from the execution environment of a constructor with dependencies. Just think of something like: ```app.controller('ctrl', ['$scope','d', function($scope,d) { $scope.toggle = function () {d.doSomething();} } ])``` – crishushu Feb 03 '17 at 17:59
  • You have to inject these manually yourself using the injector's `get()` method. I've updated my answer as an example. – Matthew Cawley Feb 03 '17 at 18:18
  • 1
    Thats it! Thanks. Unfortunately, I cannot give you more than one upvote... – crishushu Feb 03 '17 at 18:44
  • Haha, no problem, pleased it helped anyway. – Matthew Cawley Feb 03 '17 at 18:58