[Angular] Isolate Scope .2

For have a better understand of Isolate Scope and the notation in scope:{}, we see an example:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Directive</title>
        <link rel="stylesheet" href="foundation.min.css" />
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body >
        <div ng-app="choreApp">
            <kid></kid>
            <kid></kid>
            <kid></kid>
            <kid></kid>
        </div>
        </div>
    </body>
</html>

Javascript:

var app = angular.module("choreApp", []);

app.directive("kid", function() {
  return {
    restrict: "E",
    scope: {}, //pass in this scope, this will limit to one pre kid
    template: '<input type="text" ng-model="chore"/>{{chore}}'
  }
});

 

If you don't have:

scope:{},

It will look like this:

 As you can see 4 kids are binded with the same scope.

If you add that code, the result should be:

 You can see the scope is isolated.

 

posted @ 2014-08-14 15:17  Zhentiw  阅读(189)  评论(0)  编辑  收藏  举报