角UI：日期選擇器似乎表示按鈕

當掛angularjs我有這個片的HTML代碼在我的應用程序（NG-應用和NG-控制器值前定義）：角UI：日期選擇器似乎表示按鈕

<div> 
    <label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label> 
    <input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/> 
    <img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" /> 
</div>

我AngularJS控制器看起來是這樣的：

function ProjectSearchCtrl($scope) { 
    $scope.startDate = ''; 

    $scope.hasStartDate = function() { 
     return $scope.startDate != ''; 
    }; 

    $scope.clearStartDate = function() { 
     $scope.startDate = ''; 
    }; 

    $scope.dateOptions = { 
     dateFormat: "yy-mm-dd", 
     showOn: "focus" 
    }; 
}

這完美的作品：我有一個日期選擇器設置正確感謝AngularUI，在AngularJS結合作品...

但是，如果我改變showOn值「按鈕「或」Both「（實際顯示日期選擇器按鈕的兩個可能選項），輸入後的所有內容（包含ui-date屬性）停止工作：ng-show，ng-click ...控制器甚至不打電話。

版本（所有可達最新）：

的jQuery 1.7.2
angularJS 1.0.0
angularUI 0.1.0
鉻20

來源

2012-07-23 Evren Kuzucuoglu

我懷疑這是因爲jquery日期選擇器小部件搞亂了HTML和令人困惑的AngularJS。我會思考我們能做些什麼。這可能是因爲我們必須將日期選擇器封裝在div或其他東西中，以隔離jquery小部件影響HTML其餘部分的更改。 – 2012-07-23 13:06:39

嗯，是的的，該解決方法訣竅 – 2012-07-23 14:26:55

請看看this line in the Select2 directive。這是一張紙條給任何人寫一個指令/實施在AngularJS插件（不只是AngularUI）：

所鏈接的元素之後立即注入了新的DOM元素的任何插件運行擾亂編譯器的風險。原因是因爲AngularJS的工作原理，它在編譯時緩存每個DOM元素的索引，然後在鏈接時進行第二遍。當你注入新的DOM時，你在指令後立即偏移所有兄弟的索引。

由於這個原因，我不得不將TinyMCE和Select2都包裝在setTimeout中，以便在鏈接完成後注入DOM 。請注意，我不打擾使用$超時，因爲我實際上不需要/ apply $ apply（）來啓動插件，因爲當插件更改數據時，已經有回調了。

我會考慮確保在AngularUI中這是統一的。不幸的是，目前在AngularJS中似乎沒有優雅的解決方案，但這是我一直在考慮的問題，並且一直在尋找更好的解決方案。

閱讀谷歌網上論壇帖子，瞭解更多有關編譯VS聯：https://groups.google.com/forum/?fromgroups#!searchin/angular/compile$20link/angular/RuWn5W3Q5I0/KJhcQJ_RNsIJ

您還可以在未來open a bug ticket on the AngularUI project。

來源

2012-07-23 18:06:49 ProLoser

感謝您爲我打開票。對於查找問題的其他人，請參閱https://github.com/angular-ui/angular-ui/issues/109 – 2012-07-24 08:26:36

正如Pete BD在他對這個問題的評論中所建議的那樣，jQueryUI和angularJS交互的方式存在某種錯誤/不想要的行爲。解決方法是將輸入控件包裝在div中。

<div class="date"> 
    <label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label> 
    <div> 
     <input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>         
    </div> 
    <img class="clear" ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" /> 
</div>

現在我可以使用showOn「both」或「button」。

來源

2012-07-23 14:30:19

此外，你應該考慮使用ui-reset而不是那個img .. ;-D http://angular-ui.github.com/#directives-reset – 2012-07-23 15:14:01

甜！謝謝。我剛剛開始嘗試將大量的js應用程序遷移到它，因此歡迎任何建議！ – 2012-07-23 15:51:10

這是固定在最新的版本！

來源

2013-02-15 12:45:04

角UI：日期選擇器似乎表示按鈕

回答

相關問題