ANGULARJS Learning 2-instruction (Directive)/Controller/scope (SCOPE)

Source: Internet
Author: User
Tags script tag

Ng-app the root element of the angular, starting from here to compile the DOM

Ng-model declares the variable and binds the value of the element to the variable

Traverse Ng-repeat

Generally used in lists and drop-down menus

<div ng-app= "" ng-init= "names=[' Jani ', ' hege ', ' Kai ']" >  <p> use ng-repeat to loop arrays </p>  <ul >    <li ng-repeat= "x in Names" >      {{x}}    </li>  </ul></div>

Custom directives

Looks like angular is a global variable.

  <body>        <div ng-app= "App" >        <!--call Method 1--        <say-hello></say-hello>    </div>    <script>        //  get to App instance        var app = Angular.module ("app" ,[]);                 // add say Directive        App.directive ("SayHello", () ={            return  {                //  Be sure to template, directly return the string does not                Template: "            };        });     </script>  </body>

Controller controllers, which write the business logic of the page

Variable name must hump, otherwise it will parse the wrong

In fact, the IDE also error.

Many pits, if there are some places leaking, the entire template will not work.

<body> <!--Here you must specify the controller name to use--<div ng-app= "app" ng-controller= "Myctrl" > <!--&L t;input> tag represents input box--<input type= "text" ng-model= "FirstName" ><br> <input type= "text" ng- Model= "LastName" ><br> <!--can not be directly used with variable FullName, because there is no way to declare directly, only functions---<div>{{fullName ()}}</div> </div> <script>varApp = Angular.module (' app ',[]); App.controller (' Myctrl ', ($scope) ={$scope. firstName= "Hello"; $scope. LastName= "World"; //declare the function, take care not to add ()$scope. FullName = () ={                return$scope. firstname+ "" +$scope. LastName;            }        }); </script></body>

Controllers in external files

And JS, must be separate files to write, just need to introduce JS in the script tag, the other way of writing/use the same

<script src= "Personcontroller.js" ></script>

Scope scope

Scope is a JavaScript object with properties and methods that can be used in views and controllers

1, in the controller, as a parameter, the above is an example.

2, the controller to scope to add objects, view can get. Use no $scope prefix required

3, in view use Ng-model to add objects to scope, controller can get. $scope prefix required for controller use

Root scope

is the scope bridge within each controller.

When iterating through an array, a constant is required. Of course, you can also use constants directly

<ul>    <li ng-repeat= "x in Names" >{{x}} {{lastname}}</li></ul>App.controller ( function ($scope, $rootScope) {    = ["Emil", "Tobias", "Linus"];     = "Refsnes";});

ANGULARJS Learning 2-instruction (Directive)/Controller/scope (SCOPE)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.