As a newcomer to Angular, I've spent some time reading up on scopes and controllers, but I still feel like something isn't quite clicking for me.
Let's take a look at this code snippet:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.array = [1,2,3];
$scope.show = false;
$scope.toggle = function (){
$scope.show = !$scope.show;
console.log($scope.show);
};
});
Now, let's examine the markup:
<body ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="n in array">
<a href="#" ng-click="show = !show">Click here to show</a>
<span ng-show="show">Something to show</span>
</li>
</ul>
</body>
While using "ng-click='show = !show'" works fine with ng-show, trying to use the toggle() method doesn't. How can I adjust the code to make toggle() work? How do I access the correct scope within the controller? Is it necessary to have ng-controller="myCtrl" on every li tag? Should each scope created by directives in my markup have its own controller? What is considered best practice in this scenario?