zoukankan      html  css  js  c++  java
  • 指令的引用及ng-model的监听.html

    <!DOCTYPE HTML>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>222-directive-ng</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        
        <div ng-app="testModule" ng-controller="testCtr">
          <test-dire ></test-dire>
          <!-- 上面这种写法就会报错,看控制台。因为我们在指令中require了ngModel,但是在标签中没有使用ng-model,那么就会报错 -->
          <!-- <test-dire ng-model="say"></test-dire> -->
          <button ng-click="joke()">窗前明月光</button>
          
    
        </div>
    
    <script src="../js/lib/angular.js"></script>
    <script type="text/javascript">
        angular.module("testModule",[])
          .controller("testCtr",function($scope){
          })
          .directive("testDire",function(){
              return {
                  restrict:"AE",
                  require:"ngModel",
                  template:'<div>{{say}}<ul ng-model="ssl"><li>{{ssl}}</li><li>2</li></ul></div>',
                  link:function(scope,elem,attr,ngModelCtr){
                    //scope.say = "niiss";
                    scope.ssl = "nihao";
    
                    //通过input 或 $setViewValue输入框的时候,会触发下面的回调
                    ngModelCtr.$parsers.push(function(viewValue){
                        if(typeof viewValue != "undefined"){
                            return "我说:"+ viewValue;
                        }
                    });
    
                    ngModelCtr.$parsers.push(function(viewValue){
                        if(typeof viewValue != "undefined"){
                            return "它说:"+ viewValue;
                        }
                    });
    
                    //通过js修改值得时候,会触发下面的回调
                    // ngModelCtr.$formatters.push(function(modelValue){
                    //   console.log("~~~~~~~~~~~~~~");
                    //   console.log(modelValue)
                    //     if(typeof modelValue != "undefined"){
                    //         //返回字符串给view,不改变模型值
                    //         return "李白睡的香"; 
                    //     }
                    // });
    
                    ngModelCtr.$setViewValue("hello");
    
                    //var h1Elem = document.getElementsByTagName("h1")[0];
                    // ngModelCtr.$render = function(){
                    //     if(typeof scope.say != "undefined"){
                    //         h1Elem.style.color = "red";
                    //     }
                    // }
    
    
                  }
              }
          }) 
        
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en" ng-app="app.module" id="top">
    <head>
    <meta charset="utf-8" />
    <title>指令的引用及ng-model的监听-2</title>
    <script src="../js/lib/angular.js"></script>
    <script>
    angular.module("my.direct.mod", [])
      .factory("myFactory", [function() {
        return {
          myFun: function() {
            console.log("factory : myFun!");
          }
        }
      }])
      .constant('graceButtonConfig', {
        activeClass: 'active',
        toggleEvent: 'click'
      })
      .directive("myDirective", ["myFactory", "graceButtonConfig", function(myFactory, graceButtonConfig) {
        return {
          restrict: "AE",
          replace: true,
          template: '<div>你好毒我好毒她豪赌 {{a}} <p>{{graceButtonConfig.active}}</p></div>',
          controller: function($scope, $timeout) {
            console.log("controller");
            $timeout(function() {
              $scope.myModel = 99;
            }, 100);
    
          },
          link: function($scope) {
            console.log("link");
            myFactory.myFun();
          }
        }
      }]);
    
    var app = angular.module("app.module", ["my.direct.mod"])
      .controller("mainCtrl", ["$scope", function($scope) {
        $scope.a = 1000;
        $scope.$watch("myModel", function(newVal, oldVal) {
          alert(newVal);
          alert(oldVal);
        })
      }])
    </script>
    </head>
    
    <body ng-controller="mainCtrl">
      <my-directive ng-model="myModel"></my-directive>   
    </body>
    
    </html>
    <!DOCTYPE html>
    <html lang="en" ng-app="app.module" id="top">
    <head>
    <meta charset="utf-8" />
    <title>指令的引用及ng-model的监听-1</title>
    <script src="../js/lib/angular.js"></script>
    <script>
    angular.module("my.direct.mod", [])
      .factory("myFactory", [function() {
        return {
          myFun: function() {
            console.log("factory : myFun!");
          }
        }
      }])
      .constant('graceButtonConfig', {
        activeClass: 'active',
        toggleEvent: 'click'
      })
      .directive("myDirective", ["myFactory", "graceButtonConfig", function(myFactory, graceButtonConfig) {
        return {
          restrict: "AE",
          replace: true,
          template: '<div>你好毒我好毒她豪赌 {{a}} <p>{{graceButtonConfig.active = 200}}</p></div>',
          controller: function($scope, $timeout) {
            console.log("controller");
            // $timeout(function() {
            //   $scope.myModel = 99;
            // }, 100);
    
          },
          link: function($scope) {
            console.log("link");
            myFactory.myFun();
          }
        }
      }]);
    
    var app = angular.module("app.module", ["my.direct.mod"])
      .controller("mainCtrl", ["$scope", function($scope) {
        $scope.a = 1000;
        $scope.$watch("myModel", function(newVal, oldVal) {
          alert("newVal: "+newVal);
          alert("oldVal: "+oldVal);
        })
      }])
    </script>
    </head>
    
    <body ng-controller="mainCtrl">
      <my-directive ng-model="myModel"></my-directive>   
    </body>
    
    </html>
  • 相关阅读:
    HCL AppScan Standard 9.0.3.13
    appscan 9.0.3.12 版本下载--补丁验证---win10 验证OK
    appscan 9.0.3.10 版本及补丁下载
    appscan 历史版本下载
    Python 批量文件下载
    广告URL
    Linux 修改hostname几种方式
    Kali系统 metasploit 使用教程
    Metasploit
    NIKTO
  • 原文地址:https://www.cnblogs.com/king-bj/p/7517711.html
Copyright © 2011-2022 走看看