directives.js：

Question

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

我跟着this guide创建了一个带有自定义指令的popover。

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

也许这是因为popover的内容是在指令中设置的，而不是在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
            });

        }
    };
}]);

页/ 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>

Answer 1

您的内容html不是角度编译的。用它来编译它：

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

        }
    };
});

Angular插入的HTML未附加到控制器

directives.js：

页/ view1.html：

controller.js

的index.html

1 个答案: