动态传递javascript变量到angularJS函数

时间:2016-01-04 13:16:42

标签: javascript jquery angularjs

我想动态地只将javascript变量传递给angular函数。是否有可能,因为我无法在我的方案中传递范围变量。还请参阅js小提琴中的代码

http://jsfiddle.net/rahulrathore1986/udmcv/293/

 <div style="border:solid;color:red;Margin-bottom:4px;"> want to pass 
  only javascript variable to angular function. IS it possible to pass
JS variable as i can not pass scope variable in my scenarios <ul
 id="ulTabList" >

 </ul> </div> <div style="margin-top:10px;"> <input type="button"
 ng-click="Addli()" value="Create"/> </div>
  

Angular代码如下

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope, $compile) {
var workGroupTab ="TestA"
$scope.Addli =function(){
    var el = angular.element('<li ng-click="OpenWorkGroupTab(workGroupTab);" ng-model="workGroupTab">Text of Li</li>'
    +'<input id="btnClose_4341" type="button" ng-model="workGroupTab" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose(workGroupTab)">');

  $compile(el)($scope);
  $("#ulTabList").append(el)
  }  
    $scope.fn_btnClose = function(v){
        console.log('closed button is'+ v);
    }

    $scope.OpenWorkGroupTab =function(workgroup){
     console.log('workgroup : ' + workgroup);
    }
})

2 个答案:

答案 0 :(得分:1)

我的理解是,您希望在workGroupTab中正确呈现变量ng-click="OpenWorkGroupTab(workGroupTab);"

您可以执行以下操作来实现此目的:

// assign to a variable so the layout is correct
var workGroup = "OpenWorkGroupTab('"+ workGroupTab +"');";
// then add it within the ng-click element
var el = angular.element('<li ng-click="'+ workGroup +'" ng-model="workGroupTab">Text of Li</li>'
+'<input id="btnClose_4341" type="button" ng-model="workGroupTab" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose(workGroupTab)">');

<强> JsFiddle

答案 1 :(得分:0)

您从jQuery方法而不是Angular的MVC方法中获取更多信息。

不要在javascirpt文件中指定模板,而是利用ng-repeat自动动态呈现每个li项目。

http://jsfiddle.net/rahulrathore1986/udmcv/293/

HTML

<div style="border:solid;color:red;Margin-bottom:4px;">
  want to pass only javascript variable to angular function. IS it passible as i can not pass scope variable in my scenarios
  <ul id="ulTabList">
    <li ng-repeat='item in list' ng-click="OpenWorkGroupTab(item);">Text of Li</li>
    <input type="button" ng-model="item" value="btn" style="margin-left:1px;" ng-click="fn_btnClose(item)">
  </ul>
</div>
<div style="margin-top:10px;">
  <input type="button" ng-click="Addli()" value="Create" />
</div>

JAVASCRIPT:

angular
  .module('my-app', [])
  .controller('AppController', function() {
    var workGroupTab = "TestA"
    $scope.list = [];
    $scope.Addli = function() {
      $scope.list.push({});
    }
    $scope.fn_btnClose = function(v) {
      console.log('closed button is' + v);
    }

    $scope.OpenWorkGroupTab = function(workgroup) {
      console.log('workgroup : ' + workgroup);
    }
  })