`

buttonsRadio directivies

Angulardirective 
阅读更多

本实例主要展示怎样用directives实现buttons radio。

AngularButtonDirective.html

<!doctype html>
<html lang="en" ng-app="BJButtionDirective">
<head>
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/angular.js"></script>
    <script type="text/javascript" src="js/buttons-radio-controller.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
    <div class="span6">
        <br>
        <strong>myModel: </strong>
        <code> {{myModel}} </code>
        <hr>
        <div>
            <input name="test" type="radio" ng-model="myModel" value="Left"> Left<br>
            <input name="test" type="radio" ng-model="myModel" value="Middle"> Middle<br>
            <input name="test" type="radio" ng-model="myModel" value="Right"> Right<br>
        </div>
        <hr>
        <buttons-radio class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></buttons-radio>
    </div>
</div>
</body>
</html>

buttons-radio-controller.js

'use strict';
function MainCtrl($scope) {
    $scope.myOptions = ['Left', 'Middle', 'Right'];
    $scope.myModel = 'Left';
    $scope.$watch('myModel', function(v){
        console.log('changed', v);
    });
}

angular.module('BJButtionDirective', []).directive('buttonsRadio', function() {
    return {
        restrict: 'E',
        scope: {
        	model: '=', 
        	options:'='
        },
        controller: function($scope){
            $scope.activate = function(option){
                $scope.model = option;
            };
        },
        template: "<button type='button' class='btn' "+
            "ng-class='{active: option == model}'"+
            "ng-repeat='option in options' "+
            "ng-click='activate(option)'>{{option}} "+
            "</button>"
    };
});

 运行效果：

点击单选项，模型发生改变

点击指令写的buttons radio，效果一样

控制台输出信息如下：

实际我们在开发过程中，在指令中一般用link，即buttons-radio-controller.js内容如下：

'use strict';
function MainCtrl($scope) {
    $scope.myOptions = ['Left', 'Middle', 'Right'];
    $scope.myModel = 'Left';
    $scope.$watch('myModel', function(v){
        console.log('changed', v);
    });
}

angular.module('BJButtionDirective', []).directive('buttonsRadio', function() {
    return {
        restrict: 'E',
        scope: {
        	model: '=', 
        	options:'='
        },
        link: function(scope, el, attrs){
        	scope.activate = function(option){
        		scope.model = option;
			};
        },
        template: "<button type='button' class='btn' "+
            "ng-class='{active: option == model}'"+
            "ng-repeat='option in options' "+
            "ng-click='activate(option)'>{{option}} "+
            "</button>"
    };
});

对buttonsRadio directives的解释：
     restrict：代码中我们使用了"E"属性，表示创建此directive将创建一个element
     scope:一般用于从controller中获取$scope中的一些值或进行数据的通信

         a.'='表示指向同一个引用，即指令中对模型的改变，会直接改变到指令外面同模型

         b.‘@表示使用此指令时，使用的地方向指令中传递值给指令，它是单向的，只支持String

         c.事件通知，指令通知外面

当然，上面指令在兼容IE8和IE8以下的版本中不能正常运行，需修改元素标签指令为属性标签，如下所示：

AngularButtonDirective.html

<!doctype html>
<html lang="en" ng-app="BJButtionDirective">
<head>
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/angular.js"></script>
    <script type="text/javascript" src="js/buttons-radio-controller.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
    <div class="span6">
        <br>
        <strong>myModel: </strong>
        <code> {{myModel}} </code>
        <hr>
        <div>
            <input name="test" type="radio" ng-model="myModel" value="Left"> Left<br>
            <input name="test" type="radio" ng-model="myModel" value="Middle"> Middle<br>
            <input name="test" type="radio" ng-model="myModel" value="Right"> Right<br>
        </div>
        <hr>
        <span buttons-radio="" class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></span>
    </div>
</div>
</body>
</html>

 buttons-radio-controller.js

'use strict';
function MainCtrl($scope) {
    $scope.myOptions = ['Left', 'Middle', 'Right'];
    $scope.myModel = 'Left';
    $scope.$watch('myModel', function(v){
        console.log('changed', v);
    });
}

angular.module('BJButtionDirective', []).directive('buttonsRadio', function() {
    return {
        restrict: 'A',
        scope: {
        	model: '=', 
        	options:'='
        },
        link: function(scope, el, attrs){
        	scope.activate = function(option){
        		scope.model = option;
			};
        },
        template: "<button type='button' class='btn' "+
            "ng-class='{active: option == model}'"+
            "ng-repeat='option in options' "+
            "ng-click='activate(option)'>{{option}} "+
            "</button>"
    };
});
  • 大小: 9.9 KB
  • 大小: 11.9 KB
  • 大小: 12.2 KB
  • 大小: 32.5 KB
分享到：
| 哈佛教授：穷人和过于忙碌的人有一个共同思 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics