plnkr控制器不起作用
[英]Plnkr controller not working
问题描述
I would like an extra input text field to appear above the add button upon click. 
我希望单击后在添加按钮上方显示一个额外的输入文本字段。 However it does not work and the console is showing a reference error. 但是，它不起作用，并且控制台显示参考错误。
Starting out fresh in angular so I am a bit of a novice. 刚开始时会有点棱角，所以我有点新手。 Any help would be great. 任何帮助都会很棒。 Thanks! 谢谢！
http://plnkr.co/edit/EFF63kpjiSg3EPQa7tkz?p=preview http://plnkr.co/edit/EFF63kpjiSg3EPQa7tkz?p=preview
HTML 的HTML
<!DOCTYPE html>
<html ng-app="testViewer">
<head>
<script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<label for="question">
Question:
<input type="text" class="form-control" placeholder="Type Question Here" />
</label>
<br />
<label for="answers">
Correct Answers (optional):
<br />
<button type="button" class="btn btn-success btn-default" ng-click="shortAnswer()">Add</button>
<button type="button" class="btn btn-danger btn-default" ng-click="shortAnswer()">Delete</button>
</label>
<br />
<br />
<label for="explanation">
Explanation:
<input type="text" class="form-control" placeholder="Type Explanation Here" />
</label>
</body>
</html>
JS JS
// Code goes here
var app = angular.module("testViewer");
var MainController = function($scope) {
scope.shortAnswer = function () {
$('.add').click(function () {
var label = 1;
$(".content2").append('<label for="' + label + '"><input type="text" class="form-control" placeholder=""></label>');
label++;
});
$(".content2").on("click", ".remove", function () {
$(this).parent().remove();
});
};
};
app.controller("MainController", MainController);
4 个解决方案
解决方案1
4 已采纳 2016-12-27 13:51:12
Your version of angular is having issue, try to use the latest angular 您的angular版本有问题，请尝试使用最新的angular
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
and also in you userController , you need to inject $location and $anchorScroll 在userController中，还需要注入$ location和$ anchorScroll
Plunker : http://plnkr.co/edit/ASP5s8tq2Z4HSehktZJp?p=preview 柱塞： http ://plnkr.co/edit/ASP5s8tq2Z4HSehktZJp?p=preview
Edited : Since by mistake wrong plunker link was added by OP 编辑 ：由于错误地错误的pluker链接由OP添加
change you module creation line to this. 将您的模块创建行更改为此。
var app = angular.module("testViewer", []);
scope should be $scope 范围应该是$ scope
and you are mixing jquery and angular for event binding. 并且您将jquery和angular混合用于事件绑定。 In angular define method like this. 在这样的角度定义方法中。
In Controller 在控制器中
$scope.shortAnswer = function () {
// your functionality
};
In View 视野中
<button type="button" class="btn btn-success btn-default" ng-click="shortAnswer()">Add</button>
Plunker : http://plnkr.co/edit/0110aobLh7WmbafWigyU?p=preview 柱塞： http ://plnkr.co/edit/0110aobLh7WmbafWigyU?p=preview
解决方案2
1 2016-12-27 13:50:41
You didn't include jquery file but used jquery functions. 您没有包括jquery文件，但使用了jquery函数。 Include Jquery file above angularjs file injection. 在angularjs文件注入上方包含Jquery文件。
you are using angularjs 1 code but called angularjs 2. 您正在使用angularjs 1代码，但称为angularjs 2。
解决方案3
1 2016-12-27 13:57:28
"VM332 angular.js:8296 TypeError: $transclude is not a function" “ VM332 angular.js：8296 TypeError：$ transclude不是函数”
Error is coming because you implemented ng-view in wrong way. 由于您以错误的方式实现了ng-view，因此出现了错误。 read Doc- https://docs.angularjs.org/api/ngRoute/directive/ngView 阅读文档-https : //docs.angularjs.org/api/ngRoute/directive/ngView
解决方案4
1 2016-12-27 14:03:06
I'm not sure why your current code isn't working, but the convention in AngularJS is to use the ng-show and ng-hide directives. 我不确定为什么您当前的代码不起作用，但是AngularJS中的约定是使用ng-show和ng-hide指令。
HTML: HTML：
<button type="button" class="btn btn-success btn-default" ng-click="shortAnswer('add')">Add</button>
<label for="lblName"><input type="text" class="form-control" placeholder="" ng-show="showLabel"></label>
Controller: 控制器：
scope.shortAnswer = function (btnVal) {
if (btnVal == 'add') {
$scope.showLabel = true;
}
Now, I'm not sure that this is actually the best way to do it, but I assume you want both buttons to call your function shortAnswer(). 现在，我不确定这实际上是最好的方法，但是我假设您希望两个按钮都调用函数shortAnswer（）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.