web-dev-qa-db-ja.com

ng-clickで使用する関数としてAngularJSパス文字列

JavaScriptサービスをng-clickに割り当てたいのですが、どの名前がRESTサービスから提供されています。

<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
   <a href="{{menu.href}}" data-ng-click="{{menu.javascript}}">{{menu.label}}</a>
</li>

悲しいことに、ng-click内で{{}}を使用すると、angularjsパーサーは例外をスローします。だから、コールバック関数を使用するなど、いくつかの回避策を試しました

  <a href="{{menu.href}}" data-ng-click="call(menu.javascript)">{{menu.label}}</a>

しかし、私のアイデアはどれも成功しませんでした。 ng-lickでjavascript関数名を割り当てるにはどうすればよいですか？ところで関数自体は$ scopeの一部です。

編集-ここにコントローラーがあります：

「$ menu」サービスは、単にget restリクエストです。要求結果はjsonオブジェクトであり、文字列値のみを保持します。現在の問題では、menu.javascriptの結果は「loginModal（）」です。

.controller('HeaderController', function($scope, $http, ModalService, $menu, $routeParams) {
    $scope.loginModal = function() {
        console.log("modal", ModalService);
        // Just provide a template url, a controller and call 'showModal'.
        ModalService.showModal({
            templateUrl: "/modals/login.modal.html",
            controller: "LoginController"
        }).then(function(modal) {
            // The modal object has the element built, if this is a bootstrap modal
            // you can call 'modal' to show it, if it's a custom modal just show or hide
            // it as you need to.
            console.log(modal.element);
            modal.element.modal();
            modal.close.then(function(result) {
                console.log(result ? "You said Yes" : "You said No");
            });
        });
    };

    $menu.get($routeParams, function(data){
        $scope.menu = data;
    });
})

編集2：

興味深いことに、{{menu.javascript}}を使用すると、正しい文字列「loginModal（）」がDOMで利用可能になります。しかし、エラーのためangular=パーサーはそこで停止しました。

javascripthtmlangularjsangularjs-scopeangularjs-ng-click
17
KIC

このようなことができます

[〜＃〜] html [〜＃〜]

  <div ng-controller="TodoCtrl">
      <button ng-click="callFunction('testClick')">CLICK ME</button>
  </div>

コントローラー

function TodoCtrl($scope) {

    $scope.callFunction = function (name){
        if(angular.isFunction($scope[name]))
           $scope[name]();
    }

    $scope.testClick = function(){
        alert("Called");
    }
}

Working Fiddle

これがあなたを助けることを願っています。ありがとう。

29
Pankaj Parkar

'this'オブジェクト（この場合は$ scope）のプロパティにアクセスするハッシュマップ表記を使用できます。

<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
   <a href="{{menu.href}}" data-ng-click="this[menu.javascript]()">{{menu.label}}</a>
</li>
0
Andrey108