Bộ điều khiển không phải là một chức năng, không xác định, trong khi xác định bộ điều khiển trên toàn cầu

123

Tôi đang viết một ứng dụng mẫu bằng angularjs. tôi đã gặp một lỗi được đề cập dưới đây trên trình duyệt chrome.

Lỗi là

Lỗi: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactContoder&p1=not%20a%20feft%2C%20got%20und xác định

Mà ám chỉ như

Đối số 'ContactContoder' không phải là một hàm, không xác định

Mã

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>

— yokks
nguồn

172

Với Angular 1.3+, bạn không còn có thể sử dụng khai báo bộ điều khiển chung trên phạm vi toàn cầu (Nếu không đăng ký rõ ràng). Bạn sẽ cần phải đăng ký bộ điều khiển bằng module.controllercú pháp.

Thí dụ:-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

hoặc là

function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

Đó là một thay đổi đột phá nhưng nó có thể được tắt để sử dụng toàn cầu bằng cách sử dụngallowGlobals .

Thí dụ:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

Dưới đây là nhận xét từ nguồn Angular: -

kiểm tra nếu một bộ điều khiển với tên đã được đăng ký thông qua $controllerProvider

kiểm tra xem việc đánh giá chuỗi trên phạm vi hiện tại có trả về hàm tạo không

nếu $ controlProvider # allowGlobals, hãy kiểm tra đối tượng window[constructor]toàn cầu window(không được đề xuất)

 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

Một số kiểm tra bổ sung: -

Đừng đảm bảo đặt tên ứng dụng theo ng-appchỉ thị trên phần tử gốc góc của bạn (ví dụ: - html). Ví dụ: - ng-app = "myApp"
Nếu mọi thứ đều ổn và bạn vẫn gặp sự cố, hãy nhớ đảm bảo rằng bạn có đúng tệp được bao gồm trong các tập lệnh.
Bạn đã không xác định cùng một mô-đun hai lần ở các vị trí khác nhau, điều này dẫn đến bất kỳ thực thể nào được xác định trước đó trên cùng một mô-đun sẽ bị xóa, Ví dụ angular.module('app',[]).controller(..và một lần nữa ở một nơi khác angular.module('app',[]).service(..(tất nhiên bao gồm cả các tập lệnh) có thể khiến bộ điều khiển đã đăng ký trước đó trên mô-đun appsẽ được xóa với giải trí thứ hai của mô-đun.

— PSL
nguồn

Làm thế nào để kiểm tra điều này theo đề nghị? kiểm tra xem một bộ điều khiển có tên đã cho có được đăng ký qua $

— controlProvider

app.register.contler ('TheContoder', TheContoder); đã lừa tôi

— morph85

33

Tôi gặp vấn đề này bởi vì tôi đã gói một tệp định nghĩa bộ điều khiển trong một bao đóng:

(function() {
   ...stuff...
});

Nhưng tôi đã quên thực sự gọi đóng cửa đó để thực thi mã định nghĩa đó và thực sự nói với Javascript bộ điều khiển của tôi tồn tại. Tức là, những điều trên cần phải là:

(function() {
   ...stuff...
})();

Lưu ý () ở cuối.

— rogueleaderr
nguồn

1

+1 Thật thú vị, có vẻ như studio hình ảnh đôi khi tự động loại bỏ lời mời. Tôi đã sao chép một tập tin js hiện có chứa mã này; bản gốc có lời gọi, tập tin sao chép thì không.

— papergodzilla

16

Tôi là người mới bắt đầu với Angular và tôi đã mắc lỗi cơ bản là không bao gồm tên ứng dụng trong phần tử gốc góc. Vì vậy, thay đổi mã từ

<html data-ng-app>

đến

<html data-ng-app="myApp">

đã làm cho tôi. @PSL, đã bao gồm điều này đã có trong câu trả lời của anh ấy ở trên.

— Prakash Tiwari
nguồn

8

Tôi đã có lỗi này vì tôi không hiểu sự khác biệt giữa angular.module('myApp', [])vàangular.module('myApp') .

Điều này tạo ra mô-đun 'myApp' và ghi đè lên bất kỳ mô-đun hiện có nào có tên 'myApp':

angular.module('myApp', [])

Cái này lấy một mô-đun hiện có 'myApp':

angular.module('myApp')

Tôi đã ghi đè mô-đun của mình vào một tệp khác, sử dụng cuộc gọi đầu tiên ở trên, tạo ra một mô-đun khác thay vì truy xuất như tôi mong đợi.

Chi tiết tại đây: https://docs.angularjs.org/guide/module

— Jake Stewart
nguồn

1

Trong trường hợp của tôi, tôi đã thêm mô-đun, tôi đã thêm bộ điều khiển, nhưng tôi quên thêm mô-đun vào danh sách mô-đun cho ứng dụng. `angular.module (" ứng dụng ", [HEREYOURMODULE] ...`

— Thomas

3

Tôi chỉ di chuyển sang góc 1.3.3 và tôi thấy rằng Nếu tôi có nhiều bộ điều khiển trong các tệp khác nhau khi ứng dụng bị ghi đè và tôi bị mất các thùng chứa khai báo đầu tiên.

Tôi không biết nếu đó là một thực hành tốt, nhưng có lẽ có thể hữu ích cho một người khác.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

— Tiếng Pháp
nguồn

2

Tôi gặp vấn đề này khi vô tình khai báo lại myApp:

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

Sau khi xác định Controller1lại , ngừng hoạt động và tăng lỗi OP.

— Daniel Flippance
nguồn

2

Lời khuyên thực sự tuyệt vời, ngoại trừ lỗi CÙNG CÓ THỂ xảy ra đơn giản bằng cách thiếu tập lệnh quan trọng bao gồm trên trang gốc của bạn

thí dụ:

trang: index.html

   np-app="saleApp"

Còn thiếu

<script src="./ordersController.js"></script>

Khi một Tuyến được cho biết bộ điều khiển và chế độ xem nào sẽ phục vụ:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

Vì vậy, vấn đề thiết yếu của bộ điều khiển không xác định CÓ THỂ xảy ra trong lỗi vô ý này thậm chí không tham chiếu đến bộ điều khiển!

— Tom Stickel
nguồn

0

Lỗi này cũng có thể xảy ra khi bạn có một dự án lớn với nhiều mô-đun. Đảm bảo rằng ứng dụng (mô-đun) được sử dụng trong tệp góc của bạn giống với ứng dụng bạn sử dụng trong mẫu của mình, trong ví dụ này " thisApp ".

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

— Patrick
nguồn

0

Nếu vẫn thất bại và bạn đang sử dụng Gulp hoặc một cái gì đó tương tự ... chỉ cần chạy lại nó!

Tôi đã lãng phí gấp bốn phút để kiểm tra mọi thứ khi tất cả những gì nó cần là một cú đá nhanh vào quần.

— sigmapi13
nguồn

0

Nếu bạn đang sử dụng các tuyến đường (xác suất cao) và cấu hình của bạn có tham chiếu đến bộ điều khiển trong mô-đun không được khai báo là phụ thuộc thì việc khởi tạo cũng có thể thất bại.

Ví dụ: giả sử bạn đã định cấu hình ngRoute cho ứng dụng của mình, như

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Hãy cẩn thận trong khối khai báo các tuyến đường,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Khai báo secondModulenhư một phụ thuộc sau 'ngRoute' sẽ giải quyết vấn đề. Tôi biết tôi đã có vấn đề này.

— H.Rabie
nguồn

0

Tôi đã gặp lỗi này vì tôi đang sử dụng một phiên bản cũ hơn không tương thích với mã của tôi.

— Trưởng khoa
nguồn

0

Trong trường hợp của tôi, những lỗi này đã xảy ra do lỗi cú pháp tại danh sách list.find (); Phương thức 'find' của danh sách không được IE11 nhận ra, do đó phải thay thế bằng phương thức Filter, hoạt động cho cả IE11 và chrome. tham khảo https://github.com/flrs/visavail/issues/19

— HydTechie
nguồn

0

Lỗi này, trong trường hợp của tôi, trước lỗi cú pháp tại phương thức tìm danh sách trong IE11. do đó, thay thế phương thức tìm bằng phương pháp lọc như được đề xuất https://github.com/flrs/visavail/issues/19

Sau đó, bộ điều khiển trên không xác định lỗi được giải quyết.

— HydTechie
nguồn

-3

Tôi đã gặp lỗi tương tự trong khi làm theo một hướng dẫn cũ với (không đủ tuổi) AngularJS 1.4.3. Cho đến nay, giải pháp đơn giản nhất là chỉnh sửa nguồn angular.js từ

function $ControllerProvider() {
  var controllers = {},
      globals = false;

đến

function $ControllerProvider() {
  var controllers = {},
      globals = true;

và chỉ cần làm theo hướng dẫn nguyên trạng, và các hàm toàn cầu không dùng nữa chỉ hoạt động như các bộ điều khiển.

— MKaama
nguồn

Đây là thực hành xấu. Như đã đề cập trong câu trả lời của PSL, bạn có thể thực hiện theo cách này:

angular.module('app')     .config(['$controllerProvider', function($controllerProvider) {         $controllerProvider.allowGlobals();     }]);

— gm2008

-1. Đây cũng là một cách tuyệt vời để đảm bảo rằng (a) bạn ghi đè lên điều này ngay khi bạn nâng cấp, điều này sẽ tạo ra các báo cáo không cần thiết (và không chính xác) rằng "nâng cấp 1.4.3 lên 1.4.4 đã phá vỡ ứng dụng của tôi!" và / hoặc (b) bạn không nâng cấp ứng dụng của mình vì "nó khó".

— Phillip Copley