AngularJS ng-show

Question

I want to show and hide a div with ng-show directive.

Here is my HTML file:

<body ng-app="my-app">
  <div ng-controller="MainController">
    <ul ng-show="isVisible" id="context-menu"> 
      <li> Menu item 1 </li>
      <li> Menu item 2 </li>
    </ul>

  </div>
</body>

Here is my CoffeeScript file:

myApp = angular.module("myApp", [])

myApp.controller "MainController", ["$scope", ($scope) ->
  $scope.isVisible = false
]

Here is the codepen for it.

What is the problem? Can you help?

score 3 · Accepted Answer · answered Jun 27 '14 at 13:54

3

The issue with your code is :

<body ng-app="my-app">

It should be:

<body ng-app="myApp">

Don't confuse how you define attributes with their values.

http://codepen.io/anon/pen/AHxEw

answered Jun 27 '14 at 13:54

lucuma

18,247
4
66
91

That's right. It worked. Now, I have another question: When we are defining a directive we define it in camel case in JS, and use it in dash separated in HTML. Why does it not valid for controller or application name definition? – ankakusu Jun 27 '14 at 13:59
A controller's name is similar in that it is a value for a `ng-controller` directive. You don't camel case the controller name which is why you see `ListCtrl` etc. A directive which is what `ng-app` and `ng-controller` are, is camel cased probably because of the dash implementation. Good question for the angular mailing list. See the next comment by @Jarrad. – lucuma Jun 27 '14 at 14:02
1

http://stackoverflow.com/questions/15748734/angular-js-naming-conventions-camelcase-and-camelcase – Jerrad Jun 27 '14 at 14:03

AngularJS ng-show

1 Answers1