angular-seed を使用して angularjs で新しいプロジェクトを開始しました。ディレクティブを追加しようとしましたが、成功しませんでした。
目標は、コントローラーに 2 つの選択肢/フィールドがあり、この選択肢のフィールドを生成したいと考えています。
私は常にエラーを取得します: 不明なプロバイダー: $scopeProvider <- $scope <- gendivDirective
依存関係の注入が必要ですか、それとも何か他のものがありますか? それとも範囲が間違っていますか？ディレクティブでコントローラーを使用できるようにする必要がありますか?
ありがとう、パトリック
test.html:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div ng-controller="FormCtrl">
<span gendiv>
</span>
</div>
</body>
</html>
script.js:
angular.module('myApp', ['myApp.directives','myApp.controllers']);
/* Controllers */
angular.module('myApp.controllers', [])
.controller('FormCtrl', ['$scope', function ($scope) {
$scope.choices = {
object: [
{label: "Choice0"},
{label: "Choice1"}
]
};
$scope.addChoice = function() {
$scope.choices.object.push({
label: 'Choice' + $scope.choices.object.length.toString()
});
};
}]);
/* directives */
angular.module('myApp.directives', [])
.directive('gendiv', ['$scope', function($scope) {
return {
controller: 'FormCtrl',
template: '<div class="control-group" ng-repeat="choice in choices.object">' +
'<label class="control-label" for="{{choice.label}}">{{choice.label}}</label>' +
'<div class="controls" style="color: #0044cc">' +
'<input type="text" placeholder="Enter second choice here" name="choices[]" data-ng-model="choices[]" required> <i class="icon-plus-sign icon-large" style="padding-left:10px;cursor: pointer" alt="add choice" ng-click="addChoice()" class="add"></i>' +
'</div>' +
'<span ng-show="myForm.name.$error.required" class="help-inline">Required</span>' +
'</div>',
link: function (scope, elem, attrs) {
console.log("Recognized the directive usage");
}
}
}]);