【问题标题】：Angular inserted HTML not attached to controller角度插入的 HTML 未附加到控制器
【发布时间】：2016-03-18 17:20:24
【问题描述】：

我想使用 Angular 创建一个弹出框，其中包含一个 <textarea> 和一个 <button> 来执行操作。

我按照this guide 使用自定义指令创建了我的弹出框。

我的问题是弹出窗口中的内容在插入时似乎不再附加到主控制器。 <textarea> 的内容不会与{{ textarea }} 一起显示，ng-click="click()" 不会触发控制器中定义的$scope.click 函数。

也许这是因为弹出框的内容是在指令中设置的，而不是在view1.html 文档中声明的？任何帮助将不胜感激。

我已经制作了这个JSFiddle 来演示这个问题 - 从下面的代码中稍微简化了它，但问题已经很好地演示了。

directives.js：

module.directive('customPopover', [function(){
    return {
        restrict: 'A',

        link: function (scope, el, attrs) {

            $(el).popover({
                trigger: attrs.popoverTrigger,
                html: true,
                content: function() {return $('#popover_content').html();},
                placement: attrs.popoverPlacement
            });

        }
    };
}]);

pages/view1.html:

<div>
    <div id="controls">
        <a custom-popover class="btn" 
            tabindex="0"
            popover-html="copyPaste" 
            popover-placement="right"
            popover-trigger="click" 
            role="button">Copy & paste data</a>

    </div>

    <div id="popover_content" style="display:none;">
        <textarea id="textBox" type="text" ng-model="textarea"></textarea>
        <button id="submitDataBtn" ng-click="click()" type="button">Submit</button>
    </div>

    {{ textarea }}
</div>

controller.js

var module = angular.module("moduleName", ['ngRoute']);

module.controller("SimpleController", function ($scope, gsatfFactory, $sce, $location) {
    $scope.click = function() {
        $scope.table = $sce.trustAsHtml(gsatfFactory.parseData($scope.textarea));
        $location.path('view2');
    };
});

module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/view1.html',
            controller: 'SimpleController'
        })
        .when('/view2', {
            templateUrl: 'pages/view2.html',
            controller: 'SimpleController'
        })
        .otherwise({ redirectTo: '/' });

}]);

index.html

<!DOCTYPE html>

<html ng-app="moduleName">

    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
        <script src="js/controller.js"></script>
        <script src="js/factory.js"></script>
        <script src="js/directives/directives.js"></script>

    </head>

    <body>
        <div data-ng-view></div>
    </body>

</html>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的内容 html 不是 Angular 编译的。使用它来编译它：

$compile($('#popover_content').html())(scope);

你的指令：

mod.directive('customPopover', function($compile){
    return {
        restrict: 'A',

        link: function (scope, el, attrs) {

            $(el).popover({
                trigger: attrs.popoverTrigger,
                html: true,
                content: function() {return $compile($('#popover_content').html())(scope);},
                placement: attrs.popoverPlacement
            });

        }
    };
});

【讨论】：

正确。这是一个 plnkr 来演示：plnkr.co/edit/m3EsBMS8Nq2YlYwhrS5X?p=preview