如何使用requirejs绑定角度js中的click事件?

时间:2022-11-16 23:01:02

could you please tell me how to bind click event using require js + angularjs

你能告诉我如何使用require js + angularjs绑定click事件

I try to bind the click event but it is bind the click event Here is my code

我尝试绑定click事件,但它绑定click事件这是我的代码

index.html

<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<head>
    <link type="text/css" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet" />
</head>

<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script data-main="main" src="lib/require.js"></script>
</body>

</html>

main.js

requirejs.config({
    paths: {
        ionic:'lib/ionic.bundle'
    },
    shim: {
        ionic : {exports : 'ionic'}
    }, priority: [
        'ionic'
    ],

    deps: [
        'bootstrap'
    ]
});

bootstrap.js

/*global define, require, console, cordova, navigator */

define(['ionic',  'app', 'routes'], function (ionic, angular, app) {
    'use strict';

    var $html,
        onDeviceReady = function () {
            angular.bootstrap(document, [app.name]);
        };

    document.addEventListener("deviceready", onDeviceReady, false);

    if (typeof cordova === 'undefined') {
        $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function () {
            try {
                angular.bootstrap(document, [app.name]);
            } catch (e) {
                console.error(e.stack || e.message || e);
            }
        });
    }

});

app.js

/*global define, require */

define(['ionic'],

    function (angular) {
        'use strict';

        var app = angular.module('app', [
            'ionic']);

        return app;

    });

1 个解决方案

#1


1  

You have a few bugs in your code... too many too list them all. See Plunker for the corrections.

您的代码中有一些错误...太多也列出了所有错误。有关更正,请参见Plunker。

  1. The module ionic should be exported as angular.

    模块离子应输出为角度。

    requirejs.config({
        paths: {
            ionic:'lib/ionic.bundle'
        },
        shim: {
            ionic : {exports : 'angular'}
        }, priority: [
            'ionic'
        ],
    
        deps: [
            'bootstrap'
        ]
    });
    
  2. Ionic/Angular must be loaded first - or angular can't initialize itself.

    必须首先加载离子/角度 - 或角度不能初始化。

  3. In the routes you have to reference the controller by name - not by location

    在路线中,您必须按名称引用控制器 - 而不是按位置

    /*global define, require */
    
    define(['app'], function (app) {
    'use strict';
    
    
    app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {
    
            $stateProvider
                .state('login', {
                    url: "/login",
                    templateUrl: "login.html",
                    controller: 'controllers/LoginCtrl' // <-- should be 'LoginCtrl'
                })
    
            $urlRouterProvider.otherwise("/login");
    
        }]);       
    });
    

#1


1  

You have a few bugs in your code... too many too list them all. See Plunker for the corrections.

您的代码中有一些错误...太多也列出了所有错误。有关更正,请参见Plunker。

  1. The module ionic should be exported as angular.

    模块离子应输出为角度。

    requirejs.config({
        paths: {
            ionic:'lib/ionic.bundle'
        },
        shim: {
            ionic : {exports : 'angular'}
        }, priority: [
            'ionic'
        ],
    
        deps: [
            'bootstrap'
        ]
    });
    
  2. Ionic/Angular must be loaded first - or angular can't initialize itself.

    必须首先加载离子/角度 - 或角度不能初始化。

  3. In the routes you have to reference the controller by name - not by location

    在路线中,您必须按名称引用控制器 - 而不是按位置

    /*global define, require */
    
    define(['app'], function (app) {
    'use strict';
    
    
    app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {
    
            $stateProvider
                .state('login', {
                    url: "/login",
                    templateUrl: "login.html",
                    controller: 'controllers/LoginCtrl' // <-- should be 'LoginCtrl'
                })
    
            $urlRouterProvider.otherwise("/login");
    
        }]);       
    });