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

【问题标题】：button click not correctly calling my angular directive按钮单击未正确调用我的角度指令
【发布时间】：2018-02-04 03:11:28
【问题描述】：

使用此页面作为参考，How to add div with a button click in angularJs

我创建了一个角度指令，以便在单击按钮时向我的 html 页面添加一个 div。但是，当我单击按钮时，什么也没有发生。我的最终目标是能够添加许多 Column div。这是我的代码。调试器中没有其他错误，好像我没有正确绑定到点击事件。

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

$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>

【问题讨论】：

请用http://localhost:60568/source/types发布您返回的数据
更新了@MaximShoustin

标签： javascript jquery html angularjs

【解决方案1】：

这里有几个问题：

问题在于按钮ng-click。你可以检查元素并发现你有：

<button addcolumn="">Add New Column</button> 所以ng-click 错过了。
您不能将指令作为属性添加到具有上述逻辑的按钮。它可能会导致意外行为。
即使您的点击有效，您的select 也会重复列表。在这种情况下jQuery.clone() 不会解决它。
使用 jQuery 不是最佳做法，您可以使用单个 document.querySelector

我更改了指令和click 方法：

$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);
 }

指令调用将是 <add-column></add-column> 而不是：

<button addColumn>Add New Column</button>

所以你不需要复制你的代码

Demo

全指令

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

【讨论】：

如果我只想要一个“添加新列”按钮，我需要改变什么？我不希望它与列在同一个 div 中。
将按钮放在指令之外
从指令中取出按钮并在添加列不起作用之前放入添加列>
@TalenKylon 我认为这应该完全改变我们的代码。你想要这样的东西吗？ plnkr.co/edit/dKklNRMNvq0J3W5h8Bb7?p=preview