电池模板内NG-点击不会触发控制器功能 [英] ng-click inside cell template does not trigger function in controller

问题描述

我创建了一个plunker这里： http://plnkr.co/edit/ zGqouwzxguef13lx48iP？p = preVIEW

当我点击在天视图，则什么也不会发生在UI的网格单元。我所期望的是，测试功能被执行和警报显示与文本测试，但是事实并非如此。

这是怎么回事错在这里？

多数民众赞成在UI网3.0最新版本的HTML模板细胞：

HTML

 ＆LT; D​​IV NG点击=测试（）NG开关=row.entity [row.grid.columns.indexOf（COL）isPeriod。＆GT;    ＆LT; D​​IV NG-开关时=真＆GT;
        ＆LT;＆标签集GT;
            ＆LT;标签＆gt;
                ＆LT;制表标题＆GT;
                    ＆LT; I类=glyphicon glyphicon书＆GT;＆LT; / I＆GT;
                ＆LT; /制表标题＆GT;期内ID：
                {{row.entity [row.grid.columns.indexOf（COL）。ID}}
            ＆LT; /标签＆gt;
            ＆LT;选项卡中选择=alertMe（）＆GT;
                ＆LT;制表标题＆GT;
                    ＆LT; I类=glyphicon glyphicon铃＆GT;＆LT; / I＆GT;
                ＆LT; /制表标题＆GT;
                {{row.entity [row.grid.columns.indexOf（COL）。内容}}
            ＆LT; /标签＆gt;        ＆LT; /标签集＆GT; ＆所述;！ -  PeriodTemplate  - ＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV NG-开关时=false的＆GT;
       ＆LT; D​​IV＆GT;您好空的模板和LT; / DIV＆GT;
    ＆LT; / DIV＆GT; ＆所述;！ -  EmptyPeriodTemplate  - ＆GT;
＆LT; / DIV＆GT;
 

控制器：

 使用严格的;
angular.module（设计助手）。控制器（'DateplannerDayController'，函数（$范围，$州）{
    变种columnHeaderDates = ['COL1'，'COL2'，'COL3'，'COL4'，'COL5'，'COL6'，'COL7']
    $ scope.columns = createColumnHeaders（columnHeaderDates）;VAR数据= {[isPeriod：真，编号：10，ROWNUMBER：1}，{isPeriod：假的，编号：11，ROWNUMBER：2}]  $ scope.test =功能（）
  {
    警报（'测试'）;
  };    $ scope.gridOptions = {
        的rowHeight：200，
        数据：数据，
        enableSorting：假的，
        enableColumnMenu：假的，
        columnDefs：$ scope.columns，
        onRegisterApi：功能（gridApi）{
            $ scope.gridApi = gridApi;
            $ scope.gridApi.core.addRowHeaderColumn（
                {名称：'rowHeaderCol'，
                    显示名称： ''，
                    宽度：100，
                    cellTemplate：'＆LT; D​​IV＆GT;排头模板＆LT; / DIV＆GT;'
                }）;
        }
    };    功能createColumnHeaders（columnHeaders）{
        变种columnDefinitions = [];
        对于（VAR I = 0; I＆LT; columnHeaders.length;我++）{
            VAR列= {
                名称：columnHeaders [I]
                cellTemplate：lessonplanner.day.celltemplate.html'，
                现场：我+'X'
            }
            columnDefinitions.push（列）;
        }
        返回columnDefinitions;
    }
}）;
 

解决方案

本网页保存在我的搜索雨后春笋般冒出来，我设法错过在评论中解决。总之，你可能需要使用externalScopes。见<一href=\"http://stackoverflow.com/questions/26621598/angular-ui-grid-events-in-cell-header-not-firing/26628361#26628361\">Angular在信元头UI格事件不触发和<一个href=\"http://ui-grid.info/docs/#/tutorial/305_appScope\">http://ui-grid.info/docs/#/tutorial/305_appScope

I have created a plunker here: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

When I click in a cell of the ui-grid in the day view then nothing happens. What I expected is that the test function is executed and an alert is shown with text 'test' but that is not the case.

What is going on wrong here?

Thats the html cell template of the ui-grid 3.0 latest release:

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>

CONTROLLER:

'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;
    }
});

解决方案

This page kept popping up in my searches and I managed to miss the solution in the comments. To summarize, you likely need to use externalScopes. See Angular ui-grid events in cell header not firing and http://ui-grid.info/docs/#/tutorial/305_appScope

这篇关于电池模板内NG-点击不会触发控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！