Question

使用AngularJS，我正在创建一个向导。为了正确导航，需要将点击的wizardresult.Title传递到函数showpagetwo()。

这是HTML：

<div ng-app="wizardApp">
  <div ng-controller="MainCtrl">
    <div ng-repeat="wizardresult in wizardresults">

      <div id="initial" ng-if="wizardresult.RootItem =='Yes'">
        <button type="button" class="btn btn-primary" ng-click="showpagetwo()">{{wizardresult.Title}}
          ...
        </button>
      </div>

      <div id="pagetwo" style="display:none">
        ...
      </div>

    </div>
  </div>
</div>

我的JS：

function showpagetwo(){
  console.log("Hello");
  $("#pagetwo").fadeIn();
  $( "#initial" ).hide()
}

var app = angular.module('wizardApp', []);
    app.controller('MainCtrl', function($scope, $http, $q){
      var supportList;
      $(document).ready(function() {
    $scope.getSupportList();
  });

  $scope.prepContext = function(url,listname,query){
    var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
    return path;
  }

  $scope.getSupportList = function() {
    supportList = $http({
      method: 'GET',
      url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
      headers: {
        "Accept": "application/json; odata=verbose"
      }
    }).then(function(data) {
      //$("#articleSection").fadeIn(2000);
      console.log(data.data.d.results);
      $scope.wizardresults = data.data.d.results;
    });
  };
});

我已经尝试了ng-click="showpagetwo(wizardresult.Title)"而只是ng-click="showpagetwo()"，但该功能完全无法解雇。

我的问题是什么？

Answer 1

你只需要将你的回调函数放在$ scope中并传递你想要接收的参数。

这样的事情：

HTML：

<div class="test" ng-controller="Ctrl">
    <button ng-click="myFn(wizardresult.Title);">click me</button>
<div>

JS：

var app = angular.module('app', []);

function Ctrl($scope) {
    $scope.wizardresult = {Title: 'myname'};
    $scope.myFn = function(param){
        alert("Param: " + param);
    };
}

检查此jsfiddle：http://jsfiddle.net/m1q4q4cm/

Answer 2

在控制器内添加函数showpagetwo()。

var app = angular.module('wizardApp', []);
app.controller('MainCtrl', function($scope, $http, $q){
      var supportList;
      $(document).ready(function() {
      $scope.getSupportList();
  });

  $scope.prepContext = function(url,listname,query){
    var path = url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query;
    return path;
  }

  $scope.showpagetwo= function(title){
    console.log("Hello "+title);
    $("#pagetwo").fadeIn();
    $( "#initial" ).hide()
  }
  $scope.getSupportList = function() {
    supportList = $http({
      method: 'GET',
      url: this.prepContext(siteOrigin+"/divisions/testing","SupportList","?$orderBy=Title"),
      headers: {
        "Accept": "application/json; odata=verbose"
      }
    }).then(function(data) {
      //$("#articleSection").fadeIn(2000);
      console.log(data.data.d.results);
      $scope.wizardresults = data.data.d.results;
    });
  };
});

Answer 3

您无法使用ng-click直接调用应用外的功能。你想要达到的角度方式就像是 HTML

<div ng-app="wizardApp">
  <div ng-controller="MainCtrl">
    <div ng-repeat="wizardresult in wizardresults">

      <div id="initial" ng-if="wizardresult.RootItem =='Yes'" ng-show="showThisDiv">
        <button type="button" class="btn btn-primary" ng-click="showpagetwo(wizardresult.Title)">{{wizardresult.Title}}
          ...
        </button>
      </div>

      <div id="pagetwo" ng-hide="showThisDiv">
        ...
      </div>

    </div>
  </div>
</div>

控制器

app.controller('MainCtrl', function($scope, $http, $q){
$scope.showThisDiv = true
$scope.showpagetwo = function(wizardTitle){
  $scope.showThisDiv = true
}
});

对于动画效果，您可以使用angular-animate库并将class="animate-show animate-hide"添加到div以获得淡入淡出效果。

出于某种原因，如果您想使用jquery，则只需将范围功能更改为

$scope.showpagetwo = function(wizardTitle){
      $("#pagetwo").fadeIn();
      $( "#initial" ).hide()
}

希望这会有所帮助。

使用AngularJS，如何将单击的对象属性传递给函数？

3 个答案: