角度嵌套控制器投擲錯誤未註冊的控制器

我想使用嵌套控制器，但我得到未註冊的控制器錯誤。我試圖在聲明之後調用控制器，但它也無法工作。下面是我的代碼：角度嵌套控制器投擲錯誤未註冊的控制器

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <link href="bootstrap.min.css" rel="stylesheet"/> 
    <script type="text/javascript" src="basics-controllers.js"></script> 

</head> 

<body ng-app> 
    <p> 
    <h2>Nested controllers with model variables defined directly on the scopes</h2> 
(typing on an input field, with a data binding to the model, overrides the same variable of a parent scope) 
    </p> 
    <div ng-controller="firstControllerScope"> 
    <h3>First controller</h3> 
    <strong>First name:</strong> {{$scope.firstName}}<br /> 
    <br /> 
    <label>Set the first name: <input type="text" ng-model="$scope.firstName"/></label><br /> 
    <br /> 
    <div ng-controller="secondControllerScope"> 
     <h3>Second controller (inside First)</h3> 
     <strong>First name (from First):</strong> {{firstName}}<br /> 
     <strong>Last name (new variable):</strong> {{lastName}}<br /> 
     <strong>Full name:</strong> {{getFullName()}}<br /> 
     <br /> 
     <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> 
     <label>Set the last name: <input type="text" ng-model="lastName"/></label><br /> 
    <br /> 
    <div ng-controller="thirdControllerScope"> 
    <h3>Third controller (inside Second and First)</h3> 
    <strong>First name (from First):</strong> {{firstName}}<br /> 
    <strong>Middle name (new variable):</strong> {{middleName}}<br /> 
    <strong>Last name (from Second):</strong> {{$parent.lastName}}<br /> 
    <strong>Last name (redefined in Third):</strong> {{lastName}}<br /> 
    <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> 
    <br /> 
    <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> 
    <label>Set the middle name: <input type="text" ng-model="middleName"/></label><br /> 
    <label>Set the last name: <input type="text" ng-model="lastName"/></label> 
     </div> 
    </div> 
    </div> 
<br /> 
    <p> 
    <h2>Nested controllers with model variables defined inside objects</h2> 
(typing on an input field, with a data binding to the model, acts on a specific object without overriding variables) 
    </p> 
    <div ng-controller="firstControllerObj"> 
    <h3>First controller</h3> 
    <strong>First name:</strong> {{firstModelObj.firstName}}<br /> 
    <br /> 
    <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> 
    <br /> 
    <div ng-controller="secondControllerObj"> 
    <h3>Second controller (inside First)</h3> 
     <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> 
     <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> 
     <strong>Full name:</strong> {{getFullName()}}<br /> 
     <br /> 
      <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> 
     <label>Set the last name: <input type="text" ng-model="secondModelObj.lastName"/></label><br /> 
     <br /> 
     <div ng-controller="thirdControllerObj"> 
    <h3>Third controller (inside Second and First)</h3> 
    <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> 
    <strong>Middle name (from Third):</strong> {{thirdModelObj.middleName}}<br /> 
    <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> 
    <strong>Last name (from Third):</strong> {{thirdModelObj.lastName}}<br /> 
    <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> 
    <br /> 
    <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> 
    <label>Set the middle name: <input type="text" ng-model="thirdModelObj.middleName"/></label><br /> 
    <label>Set the last name: <input type="text" ng-model="thirdModelObj.lastName"/></label> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

和JS文件：

var firstControllerScope = function ($scope){ 
    // Initialize the model variables 
    $scope.firstName = "John"; 
}; 
console.log('firstControllerScope',firstControllerScope("Jasdasohn")); 

var secondControllerScope = function ($scope){ 
    // Initialize the model variables 
    $scope.lastName = "Doe"; 
    // Define utility functions 
    $scope.getFullName = function(){ 
    return $scope.firstName + " " + $scope.lastName; 
    }; 
}; 

var thirdControllerScope = function ($scope){ 
    // Initialize the model variables 
    $scope.middleName = "Al"; 
    $scope.lastName = "Smith"; 

    // Define utility functions 
    $scope.getFullName = function(){ 
    return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName; 
    }; 
}; 

var firstControllerObj = function ($scope){ 
    // Initialize the model object 
    $scope.firstModelObj = { 
    firstName: "John" 
    }; 
}; 

var secondControllerObj = function ($scope){ 
    // Initialize the model object 
    $scope.secondModelObj = { 
    lastName: "Doe" 
    }; 

    // Define utility functions 
    $scope.getFullName = function(){ 
     return $scope.firstModelObj.firstName + " " + 
     $scope.secondModelObj.lastName; 
    }; 
}; 

var thirdControllerObj = function ($scope){ 
    // Initialize the model object 
    $scope.thirdModelObj = { 
    middleName: "Al", 
    lastName: "Smith" 
    }; 

    // Define utility functions 
    $scope.getFullName = function(){ 
    return $scope.firstModelObj.firstName + " " + 
     $scope.thirdModelObj.middleName + " " + 
     $scope.thirdModelObj.lastName; 
    }; 
};

我收到此錯誤：angular.js：14328錯誤：[$控制器：ctrlreg] http://errors.angularjs.org/1.6.1/ $控制器/ ctrlreg？ p0 = firstControllerScope

請指導我適當使用嵌套控制器。

來源

2017-07-17 Ajay.R1008

有一個在你的代碼中沒有的地方，你要註冊一個模塊控制器。 –

好的，是的，這是有效的，因爲我是AngularJS的新手，我只是在嘗試，所以上面提到的方法效果很好。謝謝。 :) –

這是非常基本的AngularJS。您沒有定義Angular模塊，也沒有定義控制器。

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

這裏是一個工作Plunker

確保申報模塊和控制器。還要在HTML中注入模塊。

我會建議你去看一下AngularJS Documentation

來源

2017-07-17 13:19:46

是的，這個工程，因爲我是AngularJS的新手，我只是試圖讓我的基礎強大，所以上述方法建議很好。謝謝。 :) –

不客氣 –

角度嵌套控制器投擲錯誤未註冊的控制器

回答

相關問題