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>
  • 相关阅读:
    metal的gpu query
    体积雾 global fog unity 及改进
    hdr rt format对颜色的影响
    unity deferred lighting
    unity linear space时 photoshop blend的正确设置
    unity linear work flow
    一些数据 bandwidth之类
    deferred rendering with msaa
    unity 显示mipmaplevel
    【转】在C#中使用SendMessage
  • 原文地址:https://www.cnblogs.com/king-bj/p/7517711.html
Copyright © 2011-2022 走看看