文档章节

angular自定义指令问题请教大家

哼哈三将
 哼哈三将
发布于 2016/11/26 18:17
字数 508
阅读 7
收藏 0

--------------------------------------------------------------------------------这里是主页面 !DOCTYPE html>

<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">

<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   HTML
                       //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>

<body ng-app="bootApp">

<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> ```

<!--时间模版 <div id='timeDiv' style="display:none;"> {{name}} <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> -->

<datepicker-popup></datepicker-popup>

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

</head>

<body>

<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>

         </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查看 地址

© 著作权归作者所有

哼哈三将
粉丝 0
博文 1
码字总数 508
作品 0
深圳
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
163
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
58
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
61
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
57
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部