2015-12-03 5 views
2

Я использую Angular + Typcript + RequireJS. После того как я настроил все настройки, простой ng-click не работает для меня, и в журнале ошибок нет ошибок.Угловой с машинописным контроллером

Вы, ребята, знаете, что я делаю неправильно? Любая помощь будет оценена

enter image description here

Мои файлы:

index.html

<html> 
<head> 

</head> 
<body> 
    <div ng-controller="MasterController"> 
     <button ng-click="toggleModal()">777777777777</button> 
    </div> 
    <script src="Script/lib/require.js" type="text/javascript" data-main="Script/main.js"></script> 
</body> 
</html> 

Controllers.ts

/// <reference path="../lib/typings/angular.d.ts" /> 
/// <reference path="../lib/typings/jquery.d.ts" /> 

import angular = require("angular"); 

export var controllerModule = angular.module("controllers", []); 

MasterController.ts

/// <reference path="../lib/typings/angular.d.ts" /> 
/// <reference path="../lib/typings/require.d.ts" /> 
/// <reference path="controllers.ts" /> 

import MasterControllerModule = require("Controllers"); 
class MasterController { 

    modalShown: boolean = true; 
    constructor() { 
    } 

    toggleModal() { 
     alert(777); 
     this.modalShown = !this.modalShown; 
    } 

} 
MasterControllerModule.controllerModule.controller("MasterController", MasterController); 

main.js

require.config({ 

    paths: { 

     'angular': 'lib/angular', 
     'domReady': 'lib/domReady', 
     'app': 'app', 
     'Jquery': 'lib/jquery' 
    }, 
    //waitSeconds: 0, 
    shim: { 
     'angular': { 
      exports: 'angular' 
     } 
    }, 

    deps: [ 
     // kick start application... see bootstrap.js 
     './bootstrap' 
    ] 
}); 

require([ 
    'angular', 
    'app', 
    'domReady', 
    'controllers/Controllers', 
    'controllers/MasterController', 
    'Jquery' 
]) 

app.js

define(['angular', 
'controllers/Controllers'], function (angular) { 
    return angular.module('app', ['controllers']); 
}); 

bootstrap.js

define([ 
    'require', 
    'angular', 
    'app' 
], function (require, ng) { 
    'use strict'; 

    require(['domReady!'], function (document) { 
     ng.bootstrap(document, ['app']); 
    }); 
}); 
+2

ли вы проверить, если скрипты становятся загружены, например, в Chrome Dev Tools? –

+0

В угловых подсказках я вижу эту ошибку: Модули были созданы, но никогда не загружались –

ответ

0

Я думаю, что проблема это в классе контроллера. Когда вы используете директиву ng-click, она пытается выполнить функцию, находящуюся внутри контроллеров $scope.

Класс, который вы определяете, не вводит эту зависимость и ничего не делает с помощью $scope; поэтому ничего произведения (В $scope нет метода называется toggleModal Вы можете импортировать $scope вроде этого:.

class MasterController { 

    modalShown: boolean = true; 
    static $inject = ['$scope'] 
    constructor($scope) { 
     $scope.ctrl = this 
    } 

    toggleModal() { 
     alert(777); 
     this.modalShown = !this.modalShown; 
    } 
} 

Если вы создаете объект ctrl области видимости, то по вашему мнению, вы должны будете назвать это так

<button ng-click="ctrl.toggleModal()">777777777777</button> 

Посмотрите на this видео с канала Bresarat Али YouTube для получения дополнительной информации

0

использовать контроллер как синтаксис:.

<div ng-controller="MasterController as vm"> 

затем вызвать метод щелчка так:

vm.toggleModal() 
Смежные вопросы