AngularJS指令<一>

最新推荐文章于 2024-08-03 17:05:14 发布
chenggou9601
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量163
点赞数
文章标签： javascript ui json ViewUI
原文链接：https://my.oschina.net/u/3161974/blog/1377200
版权
<!--指令
1.1 ng-include指令中可以定义一个AngularJS表达式(和ng-show以及ng-click相类似)，该表达式的值表示HTML文件的路径。然后，就可以根据路径从服务器上
          请求该HTML文件并在包含了ng-include的哪个元素的子元素中显示文件的内容（该子元素将是唯一的子元素，会覆盖掉其他所有的已有内容）。
          ng-include能够将HTML分解到更小的、可重用的也是更容易维护的文件中。
1.2 ng-switch:是另一条能够让我们在UI中选择性地添加特定HTML片段地指令。可以在HTML中直接使用switch块来条件化地引入HTML片段。

1.3 Restrict关键字：定义了如何使用指令；创建自定义属性时，可以自行规定其使用方式。restrict可以采用如下这些值：
              A 如果restrict的值为字母A，则表明指令将作为某个元素的属性进行调用(<div stock-widget></div>)，这也是默认值。
              E 表明指令将以新HTML元素的形式进行调用(<stock-widget><stock-widget>)
              C  指令将作为HTML元素的样式进行调用（<div class="stock-widget"></div>）
              M  指令将以HTML注释的形式进行调用(<!--directive="stock-widget"
1.4link函数  既可以定义指令所需的API和函数，还能控制DOM节点。AngularJS会为指令的每个实例都执行link函数，每一个实例都可以获取它自己独有
             的，完整的业务逻辑而不影响同一指令的其他实例。
             angular.module('stockMarketApp')
  .directive('stockWidget', [function() {
    return {
      templateUrl: 'stock.html',
      restrict: 'AE',
      link: function($scope, $element, $attrs) {   把mainCtrl中的一些功能移到指令中，这样指令就不再需要在MainCtrl中定义getChange函数了
        $scope.getChange = function(stock) {     $scope代表指令对应元素的作用域   $element指令所对应的元素  $attrs以字符串形式表示元素的所有属性
          return Math.ceil(((stock.price - stock.previous) /
              stock.previous) * 100);
        };
      }
    };
  }]);

1.5 作用域  每一条指令都继承了它的父作用域，也就是传入link函数的schop参数。 AngularJS在指令定义对象中提供了scope键能够完全控制指令元素
          对应的作用域。scope键可以接收一下三种值：
          false 默认值 指令作用域与父元素作用域一致
          true  指令作用域继承于父作用域，不过会创建自己的子作用域。
          object 也能将键值组成的对象传给作用域，AngularJS会创建一个“隔离作用域”该作用域并不继承父作用域中的任何信息。
          =表明HTML属性值将是JSON对象  @表明HTML属性将值将是一个字符串  &表明HTML属性是某个控制器中的函数。
1.6 Replace关键字  replace键接收布尔型的默认值为false。当改值为true时，会删除指令对应的元素，将它替换成指令定义对象中的HTML模板。
                 一般情况下，replace键将决定指令生成的模板到底会替换整个当前元素，还是仅仅替换当前元素的内容。
-->
<!--<html>-->
<!--<head>-->
    <!--<title>Stock Market App</title>-->
<!--</head>-->
<!--<body ng-app="stockMarketApp">-->

<!--<div ng-controller="MainCtrl as mainCtrl">-->
    <!--<h3>List of Stocks</h3>-->
    <!--<div ng-repeat="stock in mainCtrl.stocks">-->
        <!--<div ng-include="mainCtrl.stockTemplate">-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>-->
<!--<script>-->
    <!--angular.module('stockMarketApp', [])-->
            <!--.controller('MainCtrl', [function() {-->
                <!--var self = this;-->
                <!--self.stocks = [-->
                    <!--{name: 'First Stock', price: 100, previous: 220},-->
                    <!--{name: 'Second Stock', price: 140, previous: 120},-->
                    <!--{name: 'Third Stock', price: 110, previous: 110},-->
                    <!--{name: 'Fourth Stock', price: 400, previous: 420}-->
                <!--];-->

                <!--self.stockTemplate = 'stock.html';-->

                <!--self.getChange = function(stock) {-->
                    <!--return Math.ceil(((stock.price - stock.previous) /-->
                            <!--stock.previous) * 100);-->
                <!--};-->
            <!--}]);-->
<!--</script>-->
<!--</body>-->
<!--</html>-->


<!--&lt;!&ndash;stock.html文件内容&ndash;&gt;-->
<!--<div class="stock-dash">-->
    <!--Name:-->
  <!--<span class="stock-name"-->
        <!--ng-bind="stock.name">-->
  <!--</span>-->
    <!--Price:-->
  <!--<span class="stock-price"-->
        <!--ng-bind="stock.price | currency">-->
  <!--</span>-->
    <!--Percentage Change:-->
  <!--<span class="stock-change"-->
        <!--ng-bind="mainCtrl.getChange(stock) + '%'">   有link函数定义后该处改写为：ng-bind="getChange(stock) 也就意味着在它自己的作用域范围内查找getChange()函数"-->
  <!--</span>-->
<!--</div>-->

<!--通过ng-switch来实现功能，基于mainCtrl.currentTab的值来选择执行哪个部分。选择性得选择其中一个是通过在子元素中加入ng-switch-when
属性来实现的，ng-switch-when无法解析AngularJS表达式
-->
<html>
<head>
    <title>Switch App</title>
</head>
<body ng-app="switchApp">

<div ng-controller="MainCtrl as mainCtrl">
    <h3>Conditional Elements in HTML</h3>
    <button ng-click="mainCtrl.currentTab = 'tab1'">
        Tab 1
    </button>
    <button ng-click="mainCtrl.currentTab = 'tab2'">
        Tab 2
    </button>
    <button ng-click="mainCtrl.currentTab = 'tab3'">
        Tab 3
    </button>
    <button ng-click="mainCtrl.currentTab = 'something'">
        Trigger Default
    </button>

    <div ng-switch="mainCtrl.currentTab">
        <div ng-switch-when="tab1">
            Tab 1 is selected
        </div>
        <div ng-switch-when="tab2">
            Tab 2 is selected
        </div>
        <div ng-switch-when="tab3">
            Tab 3 is selected
        </div>
        <div ng-switch-default>
            No known tab selected
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script type="text/javascript">
    angular.module('switchApp', [])
            .controller('MainCtrl', [function() {
                this.currentTab = 'tab1';
            }]);
</script>
</body>
</html>

<!--创建自定义指令
格式如下：
angular.module('stockMarketApp',[])
.directive('stockWidget',function(){
return {//此处进行指令定义}
})
-->
<html>
<head>
    <title>Stock Market App</title>
</head>
<body ng-app="stockMarketApp">

<div ng-controller="MainCtrl as mainCtrl">
    <h3>List of Stocks</h3>
    <div ng-repeat="stock in mainCtrl.stocks">
        <div stock-widget><!--自定义指令-->
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="app.js">
    angular.module('stockMarketApp', [])
            .controller('MainCtrl', [function() {
                var self = this;
                self.stocks = [
                    {name: 'First Stock', price: 100, previous: 220},
                    {name: 'Second Stock', price: 140, previous: 120},
                    {name: 'Third Stock', price: 110, previous: 110},
                    {name: 'Fourth Stock', price: 400, previous: 420}
                ];

                self.getChange = function(stock) {
                    return Math.ceil(((stock.price - stock.previous) /
                            stock.previous) * 100);
                };
            }]);
</script>
<script>//自定义指令
    angular.module('stockMarketApp')
            .directive('stockWidget', [function() {
                return {
                    templateUrl: 'stock.html',//stock.html同上
                    restrict:'AE' //A或E
                };

            }]);
</script>
</body>
</html>
转载于:https://my.oschina.net/u/3161974/blog/1377200
chenggou9601
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS指令<一>

<!--指令1.1 ng-include指令中可以定义一个AngularJS表达式(和ng-show以及ng-click相类似)，该表达式的值表示HTML文件的路径。然后，就可以根据路径从服务器上请求该HTML文件并在包含了ng-include的哪个元素的子元素中...
复制链接

扫一扫