javascript - 将 Controller 添加到 AngularJS 中动态构造的 div

Question

我正在尝试将 Controller 添加到动态构建的 div 中。但是， Controller 似乎没有加载，我无法为点击功能添加相应的事件。

在下面的示例中，我在名为“employeeTableCtrl”的单独父 Controller 中构造此 div。在父 Controller 中，当用户单击“更多信息”按钮时，将构建新的 div。在这个 child 的容器中，我正在寻找附加新 Controller 的地方。

$scope.moreInfo = function(employee) {
    $("<div class='employeeWindow' ng-controller='employeeWindowCtrl'> " +
                "<button class='closeButton' ng-click='close()'> x </button> </div>".appendTo("#employees");      
    }

在单独的 Controller 中我有:

.controller('employeeWindowCtrl', [
    '$scope', function ($scope) {
        $scope.close = function() {
            alert('clicked the x');
        }
    }
])

所有 div 都已正确构造，但未附加“employeeWindowCtrl”，因此我的“click()”函数未被执行。

有人有什么建议吗？也许我处理这一切都是错误的？

谢谢

Answer 1

您正在寻找的是指令 - 一段 html，它通过链接函数具有某种私有(private) Controller 。在单独的模板中创建指令，将 Controller 功能(如果它确实适合 Controller )放在指令的链接函数中，并使用 ng-show 在单击时显示。如果我们有更多的代码可以玩，我可以给出一个更好的例子来说明这一切。

https://docs.angularjs.org/guide/directive