ng-click不适用于由指令动态添加的元素

我有一个指令，用于初始化将显示计算器的引导弹出窗口。计算器弹出窗口有一个计算按钮，它有一个ng-click，但我不能让点击事件触发。ng-click不适用于由指令动态添加的元素

经过一番研究;我想我需要使用$ compile服务，但我似乎无法弄清楚在这种情况下如何使用它。

define [],()-> 
($filter, $compile) -> 
    ddo = 
    require: "ngModel" 
    restrict: "A" 
    scope: true 
    priority: 10 
    controller: ['$scope', '$element', '$q', ($scope, $element, $q)-> 

    $scope.calculate =()-> 
     console.log "calc" 

    ] 
    link: (scope, elem, attrs, ngModel) -> 
    elem.wrap("<div class=\"input-group\"></div>") 
    pre = $("<span class=\"input-group-addon\" style=\"font-size:0.8em;\">$</i></span>") 
    post = $("<div data-toggle=\"popover\" class=\"input-group-addon pop\"><i class=\"  fa fa-github-alt\" style=\"font-size:0.8em;\"></i></div>") 
    elem.before(pre) 
    if attrs.showCalc == "true" 
     elem.after(post) 

    $(".pop").popover(
     { 
     html: true, 
     title: 'Calculator', 
     content: "Expression:<input ng-model='data.expression' type='text'></input><br> 
        Result:<input ng-model='data.result' type='text'></input> 
        <div ng-click='calculate()' style='margin-top: 5px;' class='btn btn-default btn-calculate'>Calculate</div> 
        <div ng-click='applyValue()' style='margin-top: 5px;' class='btn btn-default btn-apply'>Apply</div>" 
     })

来源

2014-02-14 jport

虽然这可以由正常工作，这将是相当容易使用[角UI]（https://github.com/angular-ui/bootstrap）。有什么特别的原因你不想使用它？ –

以及我使用这个指令的输入元素，需要一个货币金额。这个指令的主要目的是格式化什么输入到元素，我使用jquery autonumeric做。我真的想把这个计算器功能烧成货币指令。 – jport

望着source code of popover，似乎如果content是一个HTML对象，然后他们将其追加到DOM和保存js-events即使这种行为是无证。因此，这应该工作（至少在理论上）：

$(".pop").popover(
    { 
    html: true, 
    title: 'Calculator', 
    content: $compile("Expression:<input ng-model='data.expression' type='text'></input><br> 
       Result:<input ng-model='data.result' type='text'></input> 
       <div ng-click='calculate()' style='margin-top: 5px;' class='btn btn-default btn-calculate'>Calculate</div> 
       <div ng-click='applyValue()' style='margin-top: 5px;' class='btn btn-default btn-apply'>Apply</div>") 
      (scope) 
    })

来源

2014-02-14 22:33:15

太棒了！那就是诀窍，谢谢。 – jport

ng-click不适用于由指令动态添加的元素

回答

相关问题