Question

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

我创建了一个angular指令，在按钮点击时将div添加到我的html页面。但是，当我点击按钮时没有任何反应。我的最终目标是能够添加许多Column 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>

Answer 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

Full direcitve

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

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

1 个答案:

Full direcitve