Plnkr控制器不工作

我想要一个额外的输入文本字段出现在单击添加按钮上方。但它不起作用，控制台显示参考错误。Plnkr控制器不工作

开始新鲜的角度，所以我有点新手。任何帮助都会很棒。谢谢！

http://plnkr.co/edit/EFF63kpjiSg3EPQa7tkz?p=preview

HTML

<!DOCTYPE html> 
<html ng-app="testViewer"> 

<head> 
    <script data-require="[email protected]*" 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>

// 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);

来源

2016-12-27 RyeGuy

你的角度是有问题的版本，尽量使用最新的角

<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>

以及在你UserController中，你需要注入$位置和$ anchorScroll

Plunker：http://plnkr.co/edit/ASP5s8tq2Z4HSehktZJp?p=preview

编辑：由于错误错误plunker链接被添加通过OP

更改您的模块创建行到此。

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

范围应该是$范围

，你是混合jQuery和角度对事件绑定。在这样的角度定义方法中。

在控制器

 $scope.shortAnswer = function() { 

       // your functionality 

     };

在查看

 <button type="button" class="btn btn-success btn-default" ng-click="shortAnswer()">Add</button>

Plunker：http://plnkr.co/edit/0110aobLh7WmbafWigyU?p=preview

来源

2016-12-27 13:51:12 Deep

我链接到错误的PLUNK！然而，这个解决方案对我想要链接该解决方案的那个没有效果。有任何想法吗？ – RyeGuy

@RyeGuy哎呦，好的，让我看看 – Deep

@RyeGuy更新了第二次擒纵器的答案。 – Deep

您不包括jQuery的文件，但使用jQuery的功能。将jquery文件包含在angularjs文件注入之上。

您使用angularjs 1级的代码，但所谓的angularjs 2.

来源

2016-12-27 13:50:41

我收录了jquery文件。没有。 – RyeGuy

先更改版本。 –

您正在使用angularjs 1代码，但称为angularjs 2. –

“VM332 angular.js：8296类型错误：$ transclude是不是一个函数”

错误因为你以错误的方式实现了ng-view。阅读Doc- https://docs.angularjs.org/api/ngRoute/directive/ngView

来源

2016-12-27 13:57:28

我不知道为什么你当前的代码是不工作的，但在AngularJS惯例是用NG-展示和NG-隐藏指令。

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>

控制器：

scope.shortAnswer = function (btnVal) { 
    if (btnVal == 'add') { 
     $scope.showLabel = true; 
    }

现在，我不知道，这其实是做到这一点的最好办法，但我相信你想两个按钮打电话给你函数shortAnswer（）。

来源

2016-12-27 14:03:06

我很欣赏这个输入。但是他们必须能够添加无限数量的输入元素。 – RyeGuy

我会说这仍然可以做一些调整，但它可能会变得混乱，而且你的实现是有意义的。我不明白为什么你甚至在这里使用Angular--你会为你的控制器增加更多吗？我想你的问题将会与ng-models相关联？ –

Plnkr控制器不工作

回答

相关问题