指令的引用及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>

 

posted @ 2017-09-13 21:03  醉酒笑红尘  阅读(378)  评论(0)    收藏  举报