在同一控制器中的角度控制器调用方法中的on-href标签内的onclick函数

时间:2017-04-07 21:01:29

标签: javascript jquery html angularjs

我正在从控制器加载数据并在视图中显示为HTML中的可点击项目列表。选择后,我想调用控制器中的方法来执行某些逻辑。

 items.push("<li><a href='#' ng-click='choosePostcode(" + result.postcode + ");return false;'>" + result.postcode + "</a></li>");

这在视图上显示正确但单击时我的choosePostcode方法没有被点击。 我尝试了一些替代方案但没有成功。

'<li><a href="#" ng-click="alert("test");"> click </a></li>'

'<li><a href="#" ng-click="javascript:alert("test");"> click </a></li>'

    "<li><a href='#' onclick="choosePostcode(result.postcode);return false;"> + result.postcode + </a></li>");

以下评论的最新尝试。仍然没有成功。

  <div ng-app="app" ng-controller="PropertyController">
                            <div class="input-group">
                                <input name="s" class="form-control" ng-model="addr" type="text" placeholder="Search..." size="40" />
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" value="Send" ng-click="addr_search()">Search</button>
                                </span>

                            </div>
                            <div id="search">

                                    <ul>
                                        <li ng-repeat="result in results">
                                            <a href="#" ng-click="$event.preventDefault();choosePostcode(result.postcode)">{{result.postcode}}</a>
                                        </li>
                                    </ul>                                 
                            </div>

Controller Class.js

 function MarkerDrop() {
                    $.getJSON('https://api.postcodes.io/postcodes?lon=' + $scope.userLongitude + '&lat=' + $scope.userLatitude, function (data) {                         
                        if (data.result !== null) {
                            $scope.results = data.result;
                        }
                    });
                }

2 个答案:

答案 0 :(得分:0)

如果您要插入在javascript中生成的html,则必须通过$compile服务运行,以便角度识别它。

查看文档percent encode reserved characters

答案 1 :(得分:0)

我只是从您的评论中假设案例。试试这样的事情,

<强>模板:

...
<ul>
   <li ng-repeat="result in results">
      <a href="#" ng-click="$event.preventDefault();choosePostcode(result.postcode)">{{result.postcode}}</a>
   </li>
</ul>
...

<强>控制器

...
$scope.globalPostcode = '';
$scope.choosePostcode = function(postcode) { 
   $scope.globalPostcode = postcode; 
};
...
function MarkerDrop() {
    $http.get('https://api.postcodes.io/postcodes?lon=' + $scope.userLongitude + '&lat=' + $scope.userLatitude)
    .then(function(result) {                         
       $scope.results = result.data || [];
    });
}
...