AngularJS授命入门开发实例

2013-08-16

AngularJS指令入门开发实例???????? 点击Change disabled status按钮，input、select输入框变为非disabled

AngularJS指令入门开发实例

???????? 点击"Change disabled status"按钮，input、select输入框变为非disabled，再点击，变回disabled，点击依次交替变换。
AngularJS授命入门开发实例

??????? 具体实现：

??????? BJDirective.html（注意，这里必须将jquery放在angular前面，因为jquery放在angular后面，angular会用自己的JQLite，而不用JQuery，这样的结果是如下指令中的element.find('input,select')结果为空数组，达不到效果）：

???????? scriptBJDirective.js：
??????? scriptBJDirective.js：
???????? scriptBJDirective.js：
angular.module("BJDirective", [])    .directive("ngReadonlyPage", ['$parse',function($parse){        return {            link: function(scope, element, attr) {            var modelName = scope.$eval(attr.ngReadonlyPage);            var fnCallback = function(){            var flag1 = $parse(modelName.flag1)(scope);            var flag2 = $parse(modelName.flag2)(scope);            if(flag1 == true && flag2 == true) {            element.find('select,input').attr('disabled', true);            }else {            element.find('select,input').removeAttr('disabled');            }            };                        scope.$watch(modelName.flag1, function () {            fnCallback();            });            scope.$watch(modelName.flag2, function () {            fnCallback();            });            }        }    }]).controller("BJCtrl",function($scope) {    $scope.viewLogic1 = {    disabled: true    }    $scope.viewLogic2 = {    disabled: true    }    $scope.salutation = 'Hello';    $scope.name = 'World';    $scope.changeDisabledStatus = function() {    if($scope.viewLogic1.disabled && $scope.viewLogic2.disabled) {    $scope.viewLogic1.disabled = false;    $scope.viewLogic2.disabled = false;    }else {    $scope.viewLogic1.disabled = true;    $scope.viewLogic2.disabled = true;    }    }    });
?

热点排行

Bad Request.

JavaScript

AngularJS授命入门开发实例