ng-click внутри шаблона ячейки не запускает функцию в контроллере

Я создал плункер здесь: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

Когда я нажимаю на ячейку пользовательского интерфейса в дневном представлении, ничего не происходит. Я ожидал, что тестовая функция будет выполнена, и появится предупреждение с текстом «тест», но это не так.

Что здесь происходит не так?

Это шаблон ячейки html последней версии ui-grid 3.0:

HTML

<div ng-click="test()" ng-switch="row.entity[row.grid.columns.indexOf(col)].isPeriod">

    <div ng-switch-when="true">
        <tabset>
            <tab>
                <tab-heading>
                    <i class="glyphicon glyphicon-book"></i>
                </tab-heading>period id:
                {{ row.entity[row.grid.columns.indexOf(col)].id}}
            </tab>
            <tab select="alertMe()">
                <tab-heading>
                    <i class="glyphicon glyphicon-bell"></i>
                </tab-heading>
                {{row.entity[row.grid.columns.indexOf(col)].content}}
            </tab>

        </tabset>      <!-- PeriodTemplate -->
    </div>
    <div ng-switch-when="false">
       <div>Hello empty template</div>
    </div>      <!-- EmptyPeriodTemplate -->
</div>

КОНТРОЛЕР:

'use strict';
angular.module('projectplanner').controller('DateplannerDayController', function ($scope, $state) {


    var columnHeaderDates = ['col1','col2','col3','col4','col5','col6','col7']
    $scope.columns = createColumnHeaders(columnHeaderDates);

var data = [{isPeriod: true, id: 10, rowNumber: 1},{isPeriod: false, id: 11, rowNumber: 2}]

  $scope.test = function()
  {
    alert('test');
  };

    $scope.gridOptions = {
        rowHeight: 200,
        data: data,
        enableSorting: false,
        enableColumnMenu: false,
        columnDefs: $scope.columns,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.addRowHeaderColumn(
                { name: 'rowHeaderCol',
                    displayName: '',
                    width: 100,
                    cellTemplate: '<div>row header template</div>'
                });
        }
    };

    function createColumnHeaders(columnHeaders) {
        var columnDefinitions = [];
        for (var i = 0; i < columnHeaders.length; i++) {
            var column = {
                name: columnHeaders[i],
                cellTemplate: 'lessonplanner.day.celltemplate.html',
                field: i + 'x'
            }
            columnDefinitions.push(column);
        }
        return columnDefinitions;
    }
});

person Pascal    schedule 04.11.2014    source источник
comment
использовать внешние области видимости. См. мой ответ здесь: stackoverflow.com/questions/26621598/   -  person mainguy    schedule 05.11.2014
comment
@mainguy Какое это имеет отношение к externalScopes? Внешнего размаха нет. Образец ng-click со стороны ui-grid делает то же самое, что и я, без внешней области видимости. Хм... это странно, я могу поклясться, что видел, как этот ng-click в ячейкеTemplate работает с плункером, но ui-grid говорит: UI-Grid использует изолированную область, поэтому нет доступа к переменным области вашего приложения из строки или шаблон ячейки. ОК, тогда мне нужен внешний прицел!!! Спасибо, приятель!   -  person Pascal    schedule 05.11.2014
comment
На данный момент версии, туториалы и мануалы ui-grid представляют собой кровавое месиво. Я также думаю, что это работало без внешних прицелов некоторое время назад. Надеюсь, это скоро выйдет из бета-версии. Кстати: впечатляющий плункер, который вы построили!   -  person mainguy    schedule 06.11.2014
comment
развлекайтесь с плункером, настоящее приложение более продвинутое ;-)   -  person Pascal    schedule 07.11.2014


Ответы (4)


Эта страница постоянно появлялась в моих поисках, и мне удалось пропустить решение в комментариях. Подводя итог, вам, вероятно, потребуется использовать externalScopes. См. События Angular ui-grid в заголовке ячейки не запуск и http://ui-grid.info/docs/#/tutorial/305_appScope

person Fasermaler    schedule 01.03.2015
comment
Принятый ответ в stackoverflow.com/questions/26621598/ больше недействителен, см. ответ Маркуса, это ng-click=grid.appScope.myfunction() или ng-click=grid.appScope.myfunction (row.entity.cellfield) - person RandomUs1r; 07.10.2017

Если вы используете синтаксис Controller-As, попробуйте:

ng-click= "grid.appScope.<controllerAliasName>.myFunction(row)"
person Shyam Kumar    schedule 23.03.2018

Это потому, что ui-grid имеет свой собственный контроллер и не знает о внешнем контроллере.

Для облегчения сделайте следующее.. 1. Сначала назначьте контроллер на ui-grid.

var vm = this;
this.$scope.usersGridOptions = {
 appScopeProvider: vm,
 ....
}

Теперь, когда вы назначите контроллер сетке, вы можете вызвать функцию, подобную этой.

"<a type=\"button\"  href=\"\" ng-click=\"function(row.entity)\"> {{ row.entity.text}} </a>" 
person ajeetkg    schedule 17.11.2016
comment
Использование appScopeProvider - это то, что сработало для меня, по какой-то причине указание grid.appScope.vm.myFunction() не сработало для меня в шаблоне ячейки. Используя appScopeProvider и передав ему мою переменную 'vm' (которая была установлена ​​на 'this' в моем контроллере и содержала myFunction), мне просто нужно было сделать grid.appScope.myFunction(), и это сработало. - person liquidpele; 17.09.2018

В ui-сетке ячейка-шаблон, потому что ячейка имеет свою собственную область видимости,

1) do not use onclick='', instead should use ng-click=''

2) ng-click='your_function()' will not work, should use, grid.appScope.your_function()

3) when pass parameter in function(), do not use function({{xxx}}), see sample below

cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP"><a href=""  ng-click="grid.appScope.watering_modal(grid.appScope.editLink_tree_id(grid, row),grid.appScope.editLink_site_no(grid, row),grid.appScope.editLink_crm(grid, row), grid.appScope.editLink_package_no(grid, row) )">{{grid.appScope.editLink_tree_id(grid, row)}}</a></div>'
person hoogw    schedule 29.09.2017