there is nothing wrong with the module name and the controller name. Why did you report an error? I tried for a long time but failed to solve it. There is a rookie at the front end. Please give me a lot of advice.
as shown in the figure, the page reports an error like this:
HTML:
JS:
HTML source code:
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular1.5.0.min.js"></script>
<script src="js/scopeBind.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
</html>
JS source code:
var MyModule = angular.module("MyModule", []);
MyModule.controller("MyCtrl", ["scope",
function ($scope) {
$scope.ctrlFlavor = "";
}
])
MyModule.directive("drink", function () {
return {
restrict: "AE",
template: "<div>{{flavor}}</div>",
link: function (scope, element, attrs) {
scope.flavor = attrs.flavor;
}
}
})