angularjs error, binding doesn't work with this keyword

Question

Couldn't get start with angularjs, need help.

My app.js

var app = angular.module('cartApp', ['ui.router']);

app.controller('dashboardCtrl', function() {

    var dash = this;
    dash.something = "something";

});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="cartApp">
<head>
    <meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>


</head>
<body ng-controller="dashboardCtrl">{{something}}

/body>
</html>

I think I messed up but don't know where is it.

Hi, could you please post the full error, normally with injection errors it will tell you which module it had problems injecting. — George
– George, Commented Sep 2, 2016 at 15:26
You should correct your script tag starting with < like <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>, Also refer app.js file on index.html — Pankaj Parkar
– Pankaj Parkar, Commented Sep 2, 2016 at 15:26
@GeorgeLee oh it doesn't have error just the {{something}} is not printing. — Thian Kian Phin
– Thian Kian Phin, Commented Sep 2, 2016 at 15:38

Pankaj Parkar · Accepted Answer · 2016-09-02 15:47:48Z

1

You have all your bindings available inside controller context(this), so you should use controllerAs pattern to get binding available in this on the view. There you will be using controller alias inside ng-controller directive & you should use dash to get controller binding.

<body ng-controller="dashboardCtrl as dash">
   {{dash.something}}
</body>

Also make sure you have referred app.js on the page.

edited Sep 2, 2016 at 15:47

answered Sep 2, 2016 at 15:42

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Bilgesu Erdoğan · Accepted Answer · 2016-09-02 15:46:50Z

0

could you try in controller?

 app.controller('dashboardCtrl', function($scope) {

    $scope.something = "something";

});

answered Sep 2, 2016 at 15:46

Bilgesu Erdoğan

5987 silver badges18 bronze badges

Comments

Jonathan Brizio · Accepted Answer · 2016-09-02 16:02:19Z

0

For future references, I suggest to follow this great tip.

It's very useful because provide better readability and avoid make these kinds of mistakes.

answered Sep 2, 2016 at 16:02

Jonathan Brizio

1,2601 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

angularjs error, binding doesn't work with this keyword

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related