Question

这是我在angularjs中的第一个代码，我完全不知道自己做错了什么。

我创造了这个：

var app = angular.module('koloApp', []);    
app.controller('circleController', ['$scope', function ($scope) {
    $scope.kolor1 = 'red';
    $scope.kolor2 = 'yellow';   
}]);'

并使用此html：

<!DOCTYPE html>
<html lang="pl" ng-app="koloApp">
<head>
<title>KOLO</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="js/dyrektywy/kolo/kolo.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<div>
    <kolo-directive ng-click="clickMe()" kolor-wypelnienia ="'navy'" kolor-otoczenia="'yellow'"></kolo-directive>
</div>
</body>
</html>

和这个指令：

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

app.directive('koloDirective', function () {
return {
    restrict: 'E',
    templateUrl: 'js/dyrektywy/kolo/kolo.html',
    transclude: true,

    link: function ($scope, element, attr) {
        $scope.clickMe = function () {
            alert("kliknąłeś w kółeczko");
        }
    },

    scope:
        {
            kolorKola: '=kolorWypelnienia',
            kolorObwodki:'=kolorOtoczenia'
        },

};

});

一切正常。但是，当我想在我的HTML中使用ng-controller时，它完全不起作用。我试着像这样使用它： <div ng-controller: "circleController">并在控制台中收到此错误：http://errors.angularjs.org/1.5.7/ng/areq?p0=circleController&p1=not%20a%20function%2C%20got%20undefined

我不知道这个控制器有什么问题。有什么想法吗？

Answer 1

用等号替换冒号。

应该是：

<div ng-controller = "circleController">

Answer 2

您尚未在HTML中提供控制器。

你必须提供类似的

<div ng-controller= "circleController">

而不是

<div ng-controller: "circleController">

检查以下内容：

<强> HTML

<div ng-app="koloApp">
<div ng-controller="circleController">
    <kolo-directive ng-click="clickMe()" kolor-wypelnienia ="'navy'" kolor-otoczenia="'yellow'"></kolo-directive>
</div>

 </div>

<强> JS

var app = angular.module('koloApp', []);    
app.controller('circleController', ['$scope', function ($scope) {
    $scope.kolor1 = 'red';
    $scope.kolor2 = 'yellow';   
}]);

app.directive('koloDirective', function () {
return {
    restrict: 'E',
    template: '<h1>Changed your <b>templateUrl</b> to <b>template</b> for showing this example</h1>',
    transclude: true,

    link: function ($scope, element, attr) {
        $scope.clickMe = function () {
            alert("kliknąłeś w kółeczko");
        }
    },

    scope:
        {
            kolorKola: '=kolorWypelnienia',
            kolorObwodki:'=kolorOtoczenia'
        },

};

});

检查这个小提琴：Fiddle

我的棱镜控制器不起作用

2 个答案: