1

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>
Masih
  • 1,633
  • 4
  • 19
  • 38
  • 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 Jul 30 '15 at 15:18
  • http://stackoverflow.com/questions/31671133/angular-javascript-not-working-in-visual-studio-2015-asp-net-5-project-when-usin#comment51285388_31671133 – Claies Jul 30 '15 at 15:19
  • 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 Jul 30 '15 at 15:26
  • another similar answer here http://stackoverflow.com/questions/29149665/why-does-ng-controller-not-work-with-function-this-this-example/29149964#29149964 – Claies Jul 30 '15 at 15:28

1 Answers1

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!

Masih
  • 1,633
  • 4
  • 19
  • 38
  • Thanks all for being so helpful! – Masih Aug 03 '15 at 20:11
  • 2
    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 – Kirill Slatin Aug 03 '15 at 20:25