ng-click在脚本应用程序中不起作用

时间:2014-12-11 10:27:13

标签: javascript angularjs

我有这个代码

HTLM:

<script type="text/ng-template" id="custom-footer">
<div>
    <table cellspacing="0" cellpadding="0" ng-controller="SearchController"
           style="border:solid 1px black; font-family:verdana; font-size:12px;">
        <thead>
        <tr style="background-color:lightgrey;">
            <th style="width:20px;" ng-click="changeTime(0)">Journée</th>
            <th style="width:20px;" ng-click="changeTime(1)">Matin</th>
            <th style="width:20px;" ng-click="changeTime(2)">Midi</th>
            <th style="width:20px;" ng-click="changeTime(3)">Soir</th>
        </tr>
        </thead>
    </table>
</div>
</script>
 <div class="ui-datepicker-calendar columns small-3">
     <input type="text" ng-model="goDate" ng-click="updateDatePicker()"
     placeholder="Date d'aller" datepicker/>
 </div>

我的指示:

(function () {
    var mod = angular.module('matrixarCalendar', []);

    mod.directive('datepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, elem, attrs, ngModelCtrl) {
                var updateModel = function (dateText) {
                    // call $apply to bring stuff to angular model
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(dateText);
                    });

                };

                scope.updateDatePicker = function () {
                    $.datepicker.dpDiv.append($('#custom-footer').contents().text());
                };
                var options = {
                    dateFormat: 'dd/mm/yy',
                    numberOfMonths: 2,
                    autoSize: true,
                    autoclose: true,
                    minDate: new Date(),
                    onSelect: function (dateText) {
                        updateModel(dateText);
                    }
                };
                elem.datepicker(options);
            }
        };
    });
}());

控制器:

    angular.module('matrixarSearch', [
        'mm.foundation',
        'matrixarAutocomplete',
        'matrixarCalendar'
    ]).controller('SearchController', function ($scope, $translate) {

$scope.time='';

      $scope.changeTime = function(val){
            $scope.time = val;
            console.log($scope);
        };
    ...

但是当我点击我的标题时,范围不是具有良好值的init,为什么?

1 个答案:

答案 0 :(得分:2)

取消范围(SearchController 中的)功能,让我们说:

$scope.changeTime = function(val) {
    $scope.time = val;
}

并为每个标题更改用法:

<th style="width:20px;" ng-click="changeTime('0')">Journée</th>

编辑:

主要问题是当表附加jQuery时表没有编译。

需要使用$compile service来编译源代码和relvant控制器