Constructors in Angularjs

Question

I've been having a lot of problems recently trying to get my constructor work with my angular project so I created a test component. The code is supposed to toggle a message that says "hello test" by clicking a button. Please let me know why my constructor isn't responding.

<!DOCTYPE html>
  <head>
  <meta charset="UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script type="text/javascript" src="app.component.js"></script>
</head>
<body>
    <div ng-app="postEvent" 
        ng-controller="postCtrl">
        <button> reg button test </button>
        <button ng-click="toggle()"> toggle test </button>
        <button ng-show="state"> state test </button>
    </div>
</body>

// app.component.js
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {        
        $scope.toggle = function () {
        $scope.state = !$scope.state; 
    }
});

Can you show us the markup where you set the ng-app and ng-controller directives? — Lex
– Lex, Commented Dec 21, 2018 at 0:57
<div ng-app="postEvent" ng-controller="postCtrl"> <button ng-click="toggle()">test </button> <div ng-show="state" > hello test </div> </div> — Jonathan
– Jonathan, Commented Dec 21, 2018 at 1:05
You mentioned that you created a test component, but everything you have shown seems to indicate this is not a component, but a full (albeit small) AngularJS app. And you say this isn't working when you try it locally, but the snippet that Sajeetharan provided does work. I'm so confused... — Lex
– Lex, Commented Dec 21, 2018 at 17:55
A created a new angular app to see if the problem in my project. The problem is that I see his code works within the stackoverflow browser but when I try to run it in my project, there is no response within the scope of the script — Jonathan
– Jonathan, Commented Dec 21, 2018 at 18:04
Yeah, looks like you are trying to run an Angular app - that's not AngularJS. And you're trying to load an AngularJS app inside an Angular app component. Not only that, but you have everything inside an unclosed <head> tag. I'm not surprised it's not working. You need to first decide if you are going to use AngularJS (Angular 1.x) or Angular and then follow some tutorials. — Lex
– Lex, Commented Dec 21, 2018 at 18:42

Sajeetharan · Accepted Answer · 2018-12-21 01:21:51Z

1

Remove

function ctrl($scope) {    
}

which is unecessary here.

DEMO

<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="postEvent" ng-controller="postCtrl"> <button ng-click="toggle()">test </button> <div ng-show="state" > hello test </div> </div> 
<script type="text/javascript">
    var postEvent = angular.module("postEvent", []);
    postEvent.controller("postCtrl", function($scope) {        
            $scope.toggle = function () {
            $scope.state = !$scope.state; 
        }
    });
</script>

answered Dec 21, 2018 at 1:21

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

11 Comments

Jonathan Over a year ago

Now my issue is that the javascript code works in this stackoverflow browser but does not repond when I put it in my angular js project.

Sajeetharan Over a year ago

Also the network tab if angularjs reference is loaded properly

Jonathan Over a year ago

It shows no errors in the console and everything in the network tab has been loaded properly.

Sajeetharan Over a year ago

im sure you are missing something very basic

Jonathan Over a year ago

That’s what I am afraid of. I created a separate html component for this code itself and copied ur code into it and for some reason my JavaScript won’t load

|

Collectives™ on Stack Overflow

Constructors in Angularjs

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related