ng点击没有用django/angular开火

ng-click not firing with django/angular

本文关键字:angular 开火 django 有用 ng      更新时间:2023-09-26

我有一个由Django渲染的模板,我正在尝试添加一些带有angular的js行为。这很痛苦。

这是表单。ng_controller是一个django上下文变量,由我的视图设置。

<form method="POST" action="#"  ng-controller="{{ ng_controller }}" >
  <a href="#" ng-click="search('{% url 'appname:search' %}')" class="button">Search</a>
  <a href="#" ng-click="add()" class="button">Add</a>

<div class="small-12 large-4 columns content-box">
 <h4>Search Results</h4>
  <div class="small-12.large4" id="search_results" >
</div>

点击"搜索"按钮可以正常工作,这是的功能

search: (search_url) =>
  console.log "Searching..."
  success = (result) ->
     $("#search_results").replaceWith(result.data)
  error = (result) ->
     console.log "Error: #{result}"
  url = "#{search_url}/?#{form_data}"
  @$http.get(url).then(success, error)

问题是在#search_results元素中正确交换的result.data包含不触发的ng-click指令

 <a href="#" ng-click="foo()" class="button" >Do Foo</a>
 <a href="#" ng-click="console.log('foo');" class="button">Log Foo</a>

当这些元素在那里时(点击搜索后),它们除了根据锚点元素跳到页面顶部之外什么都不做。没有任何错误。(为了便于论证,foo()只会调用console.log 'foo'

我的怀疑是,因为这些指令是在页面加载后添加的,所以它们实际上并不是按角度连接的。那么这是正确的吗?如果这就是问题所在,我如何让他们编译这个方案中的指令,或者以其他方式获得我想要的行为?我知道在使用Angular时通过jQuery操作DOM会有问题,所以我很感激通过让替换代码更惯用来解决这个问题的建议,只要它可以通过向Django端点发出AJAX请求来做到这一点。

事实证明,我是正确的,结果没有编译。这是一个明确汇编结果的问题。

上面的成功回调被替换为:

success = (result) =>
     search_results = $(result.data)
     $("#search_results").replaceWith(search_results)
     @$compile(search_results)(@$scope)

我还将$compile提供程序注入到控制器类中。