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控制器不工作

回答

相關問題