Access scope property in controller with AngularJS

Question

I just started using AngularJS 1.3. I am trying to get access to scope related property that I assigned inside a function. But it seems that there is something wrong. Can someone help me out please?

  <!DOCTYPE html>
<html data-ng-app="">
<head>
    <title>SimpleController</title>
</head>
<body>

    <div data-ng-controller="SimpleController">
        <ul>
            <li data-ng-repeat="emp in employees">
                {{emp.name}}
            </li>

        </ul>
    </div>
    <script src="angular.min.js"></script>
    <script>
        function SimpleController($scope) {

            $scope.employees = [
            {name : 'emp1', id : 'id1'},
            {name : 'emp2', id : 'id2'},
            {name : 'emp3', id : 'id3'}
            ];
        }
    </script>
</body>
</html>

which version of angular is this? you can't use anonymous functions as controllers in newer versions of angular, they must be properly declared as a module. — Claies
– Claies, Commented Jul 30, 2015 at 15:18
this syntax will definitely not work. you should read the current angular documentation on the correct way to instantiate a controller, or try to follow the example in the question I posted, or other answers like it. The syntax function(SimpleController($scope) ... is definitely from an out of date tutorial. — Claies
– Claies, Commented Jul 30, 2015 at 15:26
another similar answer here stackoverflow.com/questions/29149665/… — Claies
– Claies, Commented Jul 30, 2015 at 15:28

Masih · Accepted Answer · 2015-07-30 15:51:44Z

2

It seems that the problem was the syntax I have used is deprecated and is not compatible to Angular 1.3. Here is the right approach:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>SimpleController</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="SimpleController">
        <ul>
            <li data-ng-repeat="emp in employees">
                {{emp.name}}
            </li>

        </ul>

    <script>
        angular.module('myApp', []).controller('SimpleController', function($scope){

            $scope.employees = [
            {'name' : 'emp1', 'id' : 'id1'},
            {'name' : 'emp2', 'id' : 'id2'},
            {'name' : 'emp3', 'id' : 'id3'}
            ];
        });
    </script>

Thank you all for your help!

answered Jul 30, 2015 at 15:51

Masih

1,7104 gold badges21 silver badges38 bronze badges

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

2 Comments

Masih Over a year ago

Thanks all for being so helpful!

Kirill Slatin Over a year ago

Although in this case syntax is correct it may be a bit misleading. angular.module('myApp', []) actually creates a module AND returns it. So you can chain it with .controller( instantiation. However if you attempt to create another controller/service/filter etc. with a copy of this line you will recreate module and thus erase all previously declared providers. So it's better to better save the module in var app=angular.module('myApp', []) and re-use it later

Collectives™ on Stack Overflow

Access scope property in controller with AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related