按钮ng-click不要打开路由上定义的新页面

时间:2017-08-21 10:33:32

标签: javascript angularjs

我试图通过点击按钮打开视图(html)。此按钮将在我的路径文件中打开文件声明。

当我点击它时,我有一个带有按钮的organizationView,它会打开一个包含2个tasbs的新配置页面(organizationPermissionConfig.html)。在最后一页我有两个选项卡,在每个选项卡中我都有一个表格,我可以在其中编辑单击按钮的行的属性,但我不知道为什么这个按钮不打开新页面

app.routes.js

app.controller('OrganizationsController',['$rootScope', '$scope', '$modal', 'HelperService', 'AuthService', '$state', '$http', function ($rootScope, $scope, $modal, HelperService, AuthService, $state, $http) {
        var controllerScope = $scope;

        controllerScope.organizationsData = {};
        controllerScope.organizationsData.ajax = {url:'/api/organizations/', dataSrc:''};
        controllerScope.organizationsData.ajax.beforeSend = function (xhr) {
            xhr.setRequestHeader("Authorization", AuthService.authToken());
        }
        controllerScope.organizationsData.columns = [
            {"data":null,"render":function(data) {
                return '<a href="/#/organization/'+data.id+'">'+data.data.name+'</a>';
            }},
            {"data":"domain","defaultContent":""},
            {"data":null, "orderable":false, "render":function(data){
                return '<button class="btn btn-default btn-sm" style="margin-right:5px;" onclick="angular.element(this).scope().openOrganizationPermissionsSettings(\''+data.id+'\')"><i class="fa fa-wrench"></i></button>'
                +'<button class="btn btn-default btn-sm" style="margin-right:5px; " onclick=\'angular.element(this).scope().openNewOrganizationModal('+JSON.stringify(data)+')\'><i class="fa fa-pencil"></i></button>'
                +'<button class="btn btn-default btn-sm" onclick="angular.element(this).scope().deleteOrganization(\''+data.id+'\')"><i class="fa fa-trash"></i></button>';
            }}];


        controllerScope.deleteOrganization = function (organizationId) {
            HelperService.deleteItem(organizationId, 'organization', '/api/organizations/');
        };

        controllerScope.openNewOrganizationModal = function (organization) {
            var modalInstance = $modal.open({
                templateUrl : 'newOrganizationModalContent.html',
                controller: 'OrganizationsModalInstanceController',
                resolve: {organization:function () {return organization}},
            });
        }


        controllerScope.openOrganizationPermissionsSettings = function (organizationId) {
            $state.go('app.organizationPermissionsSettings');
        };


    }]);

app.controller('OrganizationsPermissionsSettingsController',['$rootScope', '$scope', '$modal', 'HelperService', 'AuthService', '$state', '$http', function ($rootScope, $scope, $modal, HelperService, AuthService, $state, $http) {
        var controllerScope = $scope;


        controllerScope.organizationGroups = [];

        $http.get('/api/organization_permissions_groups').success(function (data) {
            console.log("data ",data);
            controllerScope.organizationGroups = data;
        });

        controllerScope.openOrganizationPermissionsSettings = function (organizationId) {
            $state.go('app.organizationPermissionsSettings');
        };

    }]);


app.controller('OrganizationGraphsController',['$rootScope', '$scope', '$modalInstance', 'HelperService', '$http',        function ($rootScope, $scope, $modalInstance, HelperService, $http) {

            var controllerScope = $scope;

            controllerScope.organizationGroup = [];

            console.log("GraphsModalInstanceController organization "+$rootScope.organization.id);

            $http.get('/api/organization_permissions_groups/graphs/'+$rootScope.organization.id).success(function (data) {
                controllerScope.organizationGroup = data;
            });

            $scope.cancel = function () {
                $modalInstance.dismiss();
            };
        }
    ]);

    app.controller('OrganizationViewsController',['$rootScope', '$scope', '$modalInstance', 'HelperService', '$http',
    function ($rootScope, $scope, $modalInstance, HelperService, $http) {

            var controllerScope = $scope;

            controllerScope.organizationGroup = [];

            $http.get('/api/organization_permissions_groups/views/'+$rootScope.organization.id).success(function (data) {
                controllerScope.organizationGroup = data;
            });

            $scope.cancel = function () {
                $modalInstance.dismiss();
            };

    }]);

organizationController.js

<td><button class="btn btn-default btn-sm" ng-click="app.organization.graphs"><i class="fa fa-pencil"></i></button></td>

<td><button class="btn btn-default btn-sm" ng-click="app.organization.views"><i class="fa fa-pencil"></i></button></td>

organizationPermissionsConfig.html

select count(distinct SUBSTR(column3, 1,10))
from sample

2 个答案:

答案 0 :(得分:0)

这种语法实际上是错误的:

ng-click="app.organization.graphs"

您需要在控制器中注入$state,在控制器内定义一个功能,例如:

$scope.navigateToGraphs = function() {
    $state.go('app.organization.graphs');
}

然后将ng-click绑定到此函数:

ng-click="navigateToGraphs()"

或者你也可以使用普通的HTML来做到这一点:

<a ui-sref="app.organization.graphs">Navigate to graphs</a>

我希望它有所帮助

答案 1 :(得分:0)

ngClick期望在单击按钮时调用<td><a ui-sref="app.organization.graphs"><button class="btn btn-default btn-sm"><i class="fa fa-pencil"></i></button></a></td> 上的方法,但是您只是将状态名称传递给此指令,这是不正确的。因此,您必须实现一个使用$state.go的方法,或者您可以使用ui-sref指令,如:

function getMasterData(datain)
{
  try
    {
      var recordtype = 'account';


      var c;
      var strcolumns = nlapiCreateRecord(recordtype).getAllFields();

      var searchcolumns = [];
      for (c = 0; strcolumns.length && c < strcolumns.length; c += 1)
      { 
            searchcolumns.push(new nlobjSearchColumn(strcolumns[c]));
      }

      var data = nlapiSearchRecord(recordtype, null, null, searchcolumns);
      return data;  
    }
    catch (ex)
    {
        nlapiLogExecution('debug', 'getMasterData', ex);
    }
    }