角度UIのピックアップが機能しない

Getting Angular UI to workここではHow to integrate AngularUI to AngularJS?の手順を実行しましたが、ポップアップにdatepickerを取得できません。角度UIのピックアップが機能しない

受け入れられた回答の両方のポストで補完されたフィドルが機能していないことに注意してください。

提案がありますか？このガジェットは、最新バージョンのangular-uiで動作していますか？

アップデート：私の資源輸入

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/directives.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script> 
<script src="/assets/module.js?body=1" type="text/javascript"></script> 
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script>

モジュール宣言：

angular.module('project', ['ngResource', 'ui.directives']);

タグ：

<input type="text" ng-model="date" ui-date/>

出典

2013-04-23 Tomas Romero

彼らは（JSとCSSの両方で404）の外部参照が不足しています。おそらく、参照がないためです。ここにはworking exampleがあります。

AngularUIは、主にjQueryUIプラグインをラップすることに注意してください。したがって、AngularUIより前のjQueryUI、jQueryUIより前のjQueryが必要です。そしてAngularUIの前にAngular自身。

jQueryUI（http://jqueryui.com/）
AngularUI（http://angular-ui.github.io/）
アプリ

そして、これらのJSファイル：ちょうどあなたが以下のCSSを持っていることを確認してください

jQuery、安全にjQuery UI Pluginを読み込むことができます。 S（Datapicker）
jQueryUI、AngularUIが角フレームワーク
AngualrUI
あなたのモジュール宣言へのアクセス権を持っているのでAngualrUIは、そのプラグインの使用（日付ピッカー）
角度を作ることができますので、、ui.directivesモジュールを参照してください。回避策として

出典

2013-04-23 14:45:39

を書きます。 –

私のアプリであなたの作業例をコピー/ペーストしましたが、うんざりに失敗しています。設定が間違っている必要があります。 –

[ネットワーク]タブにすべての依存関係がロードされているかどうか確認しましたか？あなたは404を手に入れませんか？なぜあなたは 'jquery-ui.js？body = 1'と' jquery-ui-1.10.2.custom.min.js？body = 1'を持っていますか？ –

、私は私のプロジェクトで動作するように角度のUIを取得するまで、私は作品次のディレクティブをした：

project.directive('datepicker', function() { 

    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     date: '=' 
    }, 
    link: function(scope, element, attrs) { 
     element.datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function(dateText, datepicker) { 
      scope.date = dateText; 
      scope.$apply(); 
     } 
     }); 
    }, 
    template: '<input type="text" class="span2" ng-model="date"/>', 
    replace: true 
    } 

});

とhtmlで：

<td><datepicker date="myDomainObj.startDate"></datepicker></td> 
<td><datepicker date="myDomainObj.endDate"></datepicker></td>

出典

2013-04-23 17:06:54

はJS次のものが含ま順番に

jquery.js
jquery-ui.js
angular-min。JS

私はjsファイルに次の

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

htmlコードで

<body ng-app="myApp" ng-controller="myController"> 
// some other html code 
<input type="text" ng-model="date" mydatepicker /> 
<br/> 
{{ date }} 
//some other html code 
</body>

を追加し、あなたが最初のディレクティブをコードし、その後、コントローラのコードを追加することを確認し、そうでありませんそれは問題を引き起こすでしょう。

日付ピッカーディレクティブ：上記の回答から呼ば

var app = angular.module('myApp',[]); 
app.directive('mydatepicker', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
     element.datepicker({ 
      dateFormat: 'DD, d MM, yy', 
      onSelect: function (date) { 
       scope.date = date; 
       scope.$apply(); 
      } 
     }); 
    } 
    }; 
});

ディレクティブコード。このディレクティブの後

、私は多分、私はそこに何かをいじってる、私の参照で私の質問を更新したコントローラ

app.controller('myController',function($scope){ 
//controller code 
};

出典

2015-11-25 16:47:26

角度UIのピックアップが機能しない

答えて

関連する問題