angularJs--指令

1、基础ng属性指令

ng-disabled

　　http://jsbin.com/iHiYItu/1/edit

ng-readonly

Type here to make sibling readonly:
<input type="text" ng-model="someProperty"><br/>
<input type="text"
ng-readonly="someProperty"
value="Some text here"/>

ng-checked

    <label>someProperty = {{someProperty}}</label>
    <input type="checkbox"
    ng-checked="someProperty"
    ng-init="someProperty = true"
    ng-model="someProperty">

ng-selected

    <input type="checkbox" ng-model="twocheck" />
    <select>
        <option>One Fish</option>
        <option ng-selected="twocheck">Two Fish</option>
    </select>

ng-href

  <!-- Always use ng-href when href includes an {{ expression }} -->
  <a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>

  <!-- href may not load before user clicks -->
  <a href="{{myHref}}">I'm feeling 404</a>

    angular.module('myApp', [])
    .run(function($rootScope, $timeout) {

      $timeout(function() {
        $rootScope.myHref = 'http://google.com';
      }, 2000);

    })

ng-src

　　http://jsbin.com/egucIqU/1/edit

ng-app

　　在JavaScript代码中通过run方法来访问$rootScope

　　http://jsbin.com/ICOzeFI/2/edit

ng-controller

　　http://jsbin.com/OYikipe/1/edit

<div ng-controller="SomeController">
    {{ someBareValue }}
    <button ng-click="someAction()">Communicate to child</button>
    <div ng-controller="ChildController">
        {{ someBareValue }}
        <button ng-click="childAction()">Communicate to parent</button>
    </div>
</div>

    angular.module('myApp', [])
            .controller('SomeController', function($scope) {
                // 反模式，裸值
                $scope.someBareValue = 'hello computer';
                // 设置 $scope 本身的操作，这样没问题
                $scope.someAction = function() {
                    // 在SomeController和ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = 'hello human, from parent';
                };
            })
            .controller('ChildController', function($scope) {
                $scope.childAction = function() {
                    // 在ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = 'hello human, from child';
            };
});

由于原型继承的关系，修改父级对象中的someBareValue会同时修改子对象中的值，但反之
则不行

可以看下这个例子的实际效果，首先点击child button，然后点击parent button。这个例子充分
说明了子控制器是复制而非引用someBareValue

如果将模型对象的某个属性设置为字符串，它会通过引用进行共享，因此在子$scope中修改
属性也会修改父$scope中的这个属性。

angular.module('myApp', [])
.controller('SomeController', function($scope) {
// 最佳实践，永远使用一个模式
$scope.someModel = {
someValue: 'hello computer'
}
$scope.someAction = function() {
$scope.someModel.someValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
$scope.someModel.someValue = 'hello human, from child';
};
});

无论点击哪个按钮，值都会进行同步修改

http://jsbin.com/afIyeda/1/edit。

ng-include

<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }}
</div>

ng-switch

这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变
化时渲染不同指令到视图中

<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

http://jsbin.com/AVihUdi/2/

ng-view

ng-if

http://jsbin.com/ezEcamo/1/

ng-repeat

<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
angular.module('myApp',[])
.controller('PeopleController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}
];
});

ng-init

{{ }}

{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个
绑定，只要$scope发生变化，视图就会随之自动更新

ng-bind

HTML加载含有{{ }}语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁（Flash of
Unrendered Content， FOUC）。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内

ng-cloak

除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令

<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>

ng-bind-template

<div
ng-bind-template="{{message}}{{name}}">
</div>

ng-model

ng-show/ng-hide

http://jsbin.com/ihOkagE/1/

ng-change

<div ng-controller="EquationController">
  <input type="text" ng-model="equation.x" ng-change="change()" />
  <code>{{ equation.output }}</code>
</div>
 <script>
     angular.module('myApp', [])
.controller('EquationController', function($scope) {
  $scope.equation = {};
  $scope.change = function() {
    $scope.equation.output = Number($scope.equation.x) + 2;
  };
});
 </script>

ng-form

<form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
  <div ng-repeat="field in fields" ng-form="signup_form_input">
    <input type="text"
           name="dynamic_input"
           ng-required="field.isRequired"
           ng-model="field.name"
           placeholder="{{field.placeholder}}" />
    <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
      <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
    </div>
  </div>
  <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
</form>
<script>
    angular.module('myApp', [])
.controller('FormController', function($scope) {
  $scope.fields = [
    {placeholder: 'Username', isRequired: true},
    {placeholder: 'Password', isRequired: true},
    {placeholder: 'Email (optional)', isRequired: false}
  ];

  $scope.submitForm = function() {
    alert("it works!");
  };
});
</script>

ng-click

　　http://jsbin.com/uGipUBU/2/edit

ng-select

<div ng-controller="CityController">
  <select ng-model="city" ng-options="city.name for city in cities">
    <option value="">Choose City</option>
  </select>
  Best City: {{ city.name }}
</div>
  <script>
      angular.module('myApp', [])
.controller('CityController', function($scope) {
    $scope.cities = [
      {name: 'Seattle'},
      {name: 'San Francisco'},
      {name: 'Chicago'},
      {name: 'New York'},
      {name: 'Boston'}
    ];
});
  </script>

ng-submit

<form ng-submit="submit()"
ng-controller="FormController">
Enter text and hit enter:
<input type="text"
ng-model="person.name"
name="person.name" />
<input type="submit"
name="person.name"
value="Submit" />
<code>people={{people}}</code>
<ul ng-repeat="(index, object) in people">
<li>{{ object.name }}</li>
</ul>
</form>
angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = '';
}
};
});

ng-class

ng-attr-(suffix)

<label>Their URL field:</label>
  <input type="text" ng-model="theirUrl">
  <div my-directive
       some-attr="theirUrl"
       my-link-text="Click me to go to Baidu"></div>

      angular.module("myApp", []).directive("myDirective", function(){
          return {
              restrict:'A',
              replace:true,
              scope:{
                  myUrl:'=someAttr',
                  myLinkText:'@'
              },
              template:'\
                  <div>\
                    <label>My Url Field:</label>\
                    <input type="text" ng-model="myUrl" />\
                    <a href="{{myUrl}}">{{myLinkText}}</a>\
                  </div>\
                '
          }
      })

PS：所有用例均来自《AngularJS权威教程》

posted on 2016-02-19 10:10 苏荷酒吧阅读(148) 评论(0) 收藏举报