Javascript 按钮单击未正确调用我的角度指令_Javascript_Jquery_Html_Angularjs

Javascript 按钮单击未正确调用我的角度指令

javascript jquery html angularjs

Javascript 按钮单击未正确调用我的角度指令,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,以本页为参考我创建了一个angular指令，在单击按钮时将div添加到我的html页面。但是，当我单击按钮时，什么也没有发生。我的最终目标是能够添加许多列div。这是我的密码。调试器中没有其他错误，似乎我没有正确绑定到click事件我从两个调用中得到的数据都是字符串数组 $scope.dataTypes = {"String", "Boolean", "Integer"} $scope.generatorTypes = {"StringGenerator", "IntegerGenerato

以本页为参考

我创建了一个angular指令，在单击按钮时将div添加到我的html页面。但是，当我单击按钮时，什么也没有发生。我的最终目标是能够添加许多列div。这是我的密码。调试器中没有其他错误，似乎我没有正确绑定到click事件

我从两个调用中得到的数据都是字符串数组

$scope.dataTypes = {"String", "Boolean", "Integer"}
$scope.generatorTypes = {"StringGenerator", "IntegerGenerator", "BooleanGenerator"}

代码呢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="~/Scripts/angular.js"></script>
    <script>
        function GetDataTypes($scope, $http) {
            $scope.selectedDataType = null;
            $scope.dataTypes = [];
            $scope.TemplateName = 'NameTest';
            $scope.ColumnCount = '20';
            $http({
                method: 'GET',
                url: 'http://localhost:60568/source/types'
            }).then(function (result) {
                $scope.dataTypes = result.data.Result;
                console.log($scope.dataTypes);
            });

            $scope.selectedDataTypeChanged = function () {
                $scope.generatorTypes = []
                console.log($scope.selectedDataType);
                $http({
                    method: 'GET',
                    url: 'http://localhost:60568/source/generator?datatype='+$scope.selectedDataType
                }).then(function (result) {
                    $scope.generatorTypes = result.data.Result;
                    console.log($scope.dataTypes);
                });
            }
        }

        var myApp = angular.module("myApp", []);
        myApp.controller("GetDataTypes", GetDataTypes);

        myApp.directive('addColumn', function () {
            return {
                restrict: 'A',
                scope: true,
                template:                
                    '<div id="Column">'+
                        '<hr />'+
                       'Select DataType :-'+
                       '<select ng-model="selectedDataType" ng-change="selectedDataTypeChanged()">'+
                           '<option ng-repeat="dataType in dataTypes">{{ dataType }}</option>'+
                       '</select>'+
                       '<br />'+

                       'Select Generator :-'+
                       '<select ng-model="selectedGenerator">'+
                           '<option ng-repeat="generatorType in generatorTypes">{{generatorType}}</option>'+
                    '</select>'+
                    '</div>',
                controller: function ($scope, $element, $compile) {
                    $scope.clicked = 0;
                    $scope.click = function () {
                        $('body').append($compile($('.Columns').clone())($scope));
                    }
                }
            }
        })
    </script>
</head>

<body ng-app="myApp">
    <div id="TemplateCollection" ng-controller="GetDataTypes">
        <div id="Template">
            TemplateName :- <input ng-model="TemplateName" type="text" id="TemplateName" value="" /><br />
            RowCount :- <input ng-model="RowCount" type="text" id="RowCount" value="" /><br />
            <button addColumn>Add New Column</button>
            <div class="Columns">
                <div id="Column">
                    <hr />
                    Select DataType :-
                    <select ng-model="selectedDataType" ng-change="selectedDataTypeChanged()">
                        <option ng-repeat="dataType in dataTypes">{{ dataType }}</option>
                    </select>
                    <br />

                    Select Generator :-
                    <select ng-model="selectedGenerator">
                        <option ng-repeat="generatorType in generatorTypes">{{generatorType}}</option>
                    </select>
                </div>
            </div>
        </div>
</body>
</html>


函数GetDataTypes（$scope，$http）{
$scope.selectedDataType=null；
$scope.dataTypes=[]；
$scope.TemplateName='NameTest'；
$scope.ColumnCount='20'；
$http({
方法：“GET”，
网址：'http://localhost:60568/source/types'
}).然后（函数（结果）{
$scope.dataTypes=result.data.result；
log（$scope.dataTypes）；
});
$scope.selectedDataTypeChanged=函数（）{
$scope.generatorTypes=[]
log（$scope.selectedDataType）；
$http({
方法：“GET”，
网址：'http://localhost:60568/source/generator?datatype='+$scope.selectedDataType
}).然后（函数（结果）{
$scope.generatorTypes=result.data.result；
log（$scope.dataTypes）；
});
}
}
var myApp=angular.module（“myApp”，[]）；
控制器（“GetDataTypes”，GetDataTypes）；
myApp.directive（'addColumn'，function（）{
返回{
限制：“A”，
范围：正确，
模板：
''+
“”+
'选择数据类型：-'+
''+
“{{dataType}}”+
''+
“
”+
'选择生成器：-'+
''+
“{{generatorType}}”+
''+
'',
控制器：函数（$scope、$element、$compile）{
$scope.clicked=0；
$scope.click=函数（）{
$（'body'）.append（$compile（$（'.Columns'）.clone（））（$scope））；
}
}
}
})
模板名称：-

行数：-

添加新列

选择数据类型：-
{{dataType}}


选择发电机：-
{{generatorType}}

这里有几个问题：

问题在于按钮
```
ng单击
```
。您可以检查该元件并发现：
```
添加新列
```
因此缺少
```
ng单击
```
不能将指令作为属性添加到具有上述逻辑的按钮。它可能导致意外的行为

即使您的单击成功，您的

选择将复制列表。在这种情况下，jQuery.clone（）
将无法解决此问题


使用jQuery不是最佳做法，您可以使用单个文档。querySelector


我更改了指令并单击方法：
$scope.click = function () {
   var el = angular.element('<add-column></add-column>');
    el = $compile(el)($scope);
    var body = document.querySelector('body');
    angular.element(body).append(el);
 }

$scope.click=函数（）{
var el=角度。元素（'

全直射
myApp.directive（'addColumn'，function（$compile）{
返回{
限制：'E'，
范围：正确，
模板：
''+
“添加新列”+
“”+
'选择数据类型：-'+
''+
“{{dataType}}”+
''+
“
”+
'选择生成器：-'+
''+
“{{generatorType}}”+
''+
'',
链接：函数（$scope$element）{
$scope.clicked=0；
$scope.click=函数（）{
var el=角度元素（“”）；
el=$compile（el）（$scope）；
var body=document.querySelector（'body'）；
角度。元素（体）。附加（el）；
}
}
}
})
请将返回的数据与http://localhost:60568/source/typesupdated@maximshoustin如果我只想要一个“添加新列”，我需要更改什么button？我不希望它与列位于同一个div中。将button置于directive之外将button从directive中取出，并在add列不起作用之前将其放入add New column@TalenKylon我认为这应该完全改变我们的代码。您想要这样的内容吗？
  myApp.directive('addColumn', function ($compile) {
        return {
            restrict: 'E',
            scope: true,
            template:                
                '<div class="Column">'+
                '<button ng-click="click()">Add New Column</button>'+  
                    '<hr />'+
                   'Select DataType :-'+
                   '<select ng-model="selectedDataType" ng-change="selectedDataTypeChanged()">'+
                       '<option ng-repeat="dataType in dataTypes">{{ dataType }}</option>'+
                   '</select>'+
                   '<br />'+

                   'Select Generator :-'+
                   '<select ng-model="selectedGenerator">'+
                       '<option ng-repeat="generatorType in generatorTypes">{{generatorType}}</option>'+
                '</select>'+
                '</div>',
            link: function ($scope, $element) {
                $scope.clicked = 0;

                $scope.click = function () {
                  var el = angular.element('<add-column></add-column>');
                  el = $compile(el)($scope);
                  var body = document.querySelector('body');
                  angular.element(body).append(el);
                }
            }
        }
    })