angular自定義指令問題請教你們

時間 2019-12-09

原文原文鏈接

--------------------------------------------------------------------------------這裏是主頁面 !DOCTYPE html>javascript

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/javascript" src="angular.min.js"> <script src="https://cdn.bootcss.com/angular-i18n/1.6.0-rc.1/angular-locale_zh-cn.min.js"></script> <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet">css

<script>
   var app = angular.module('bootApp',['ui.bootstrap']);```
   app.controller('DatepickerPopupDemoCtrl',function ($scope){
         $scope.dat = new Date();
         $scope.format = "yyyy/MM/dd HH:mm:ss";
         $scope.altInputFormats = ['yyyy/M!/d!'];
         $scope.popup1 = {opened: false};
         $scope.open1 = function () {
             $scope.popup1.opened = true;
         };
   });





   //已指令的形式加載time控件
   app.directive('datepickerPopup',function (){
       return {
           restrict:'E',
           templateUrl:'tmp/datepicker.html',
           controller:function ($scope,$element){
               console.log("controller---");
           },
           link:function (scope,element,attr){
                console.log("link---");
           },
           compile:function (element,attributes){
               return {
                   pre:function preLink(scope,element,attributes){
                       console.log("compile pre---");
                   },
                   post:function postLink(scope,element,attributes){
                       //調用模版append   ＨＴＭＬ
                       //var html = angular.element(document.querySelector("#timeDiv")).html();
                       //element.append(html);
                       scope.name = 'ddddfdfdfdfdfdfdfdfdffdf';
                       scope.dat = new Date();
                        scope.format = "yyyy/MM/dd HH:mm:ss";
                        scope.altInputFormats = ['yyyy/M!/d!'];
                        scope.popup1 = {
                                        opened: false
                                    };
                        scope.open1 = function () {
                            $scope.popup1.opened = true;
                        };
                        //scope.$apply();
                        console.log("compile post---");
                   }
               };
           }
       }
   });





</script>

</head>html

<body ng-app="bootApp">java

<div ng-controller="DatepickerPopupDemoCtrl"> <p class="form-group"> <div class="input-group" style="margin-left:400px;"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="關閉" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" style="width:200px"/> <button type="button" class="btn btn-info" ng-click="open1()">angular時間控件<i class="glyphicon glyphicon-calendar"></i></button> </div> </p> </div> ```git

github

<datepicker-popup></datepicker-popup>

</body> </html> ------------------------------------ 如下是同目錄的tmp目錄下的模版文件datepicker.html --------------------------------------- <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>bootstrap

</head>app

<body>post

<div> ------------------------------------- <p class="form-group"> <div class="input-group" style="margin-left:400px;"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="關閉" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" style="width:200px"/> <button type="button" class="btn btn-info" ng-click="open1()">angular時間控件<i class="glyphicon glyphicon-calendar"></i></button>ui

</div>
     </p>
</div>

</body> </html> ```

如今的問題是自定義指令裏面的scope.dat = new Date(); scope.format = "yyyy/MM/dd HH:mm:ss"; scope.altInputFormats = ['yyyy/M!/d!']; scope.popup1 = { opened: false }; scope.open1 = function () { $scope.popup1.opened = true; };這些設置沒有生效！折騰了很久不知道怎麼寫了！麻煩你們幫忙看看

完整版的請點擊個人github查看地址