标签: angularjs-ng-click

我正在使用ng-repeat来构建一个使用jQuery和TB的手风琴.出于某种原因,这在硬编码时工作正常,但在ng-repeat指令内部无法触发.

我当时认为这个问题来自jQuery,而不是事后加载的绑定元素.因此,我认为不是在页面加载时加载脚本,而是在返回数据时在.success上加载函数会更好.不幸的是,我无法弄清楚如何使这项工作.

测试页面:http://staging.converge.io/test-json

控制器:

    function FetchCtrl($scope, $http, $templateCache) {
        $scope.method = 'GET';
        $scope.url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://www.web.com&key=AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
        $scope.key = 'AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
        $scope.strategy = 'mobile';

        $scope.fetch = function() {
            $scope.code = null;
            $scope.response = null;

            $http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        };

    $scope.updateModel = function(method, url) {
        $scope.method = method;
        $scope.url = …

我不能决定在下面的情况下使用哪种方法.点击按钮时我正在尝试提醒.我可以用2种方法做到这一点.哪个是最佳做法,请告诉我原因？

方法1

<div ng-app="app">
  <button alert>directive</button>
</div>

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

app
  .directive('alert', function(){
    return {

      link: function(scope, element, attr) {
            element.on('click', function(){
          alert('clicked');
        })
      }

    }
  })

方法2

<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="go()">ng-click</button>  
</div>

app.controller('MainCtrl', ['$scope', function($scope) {

  $scope.go = function() {
    alert('clicked');
  }
}]);

谢谢你,乳山

我正在使用angularjs构建一个网站,我从网络服务获取数据.我需要将数据填充到数据表并为每行创建一个编辑按钮.经过一番调查后,我想出了这个

问题是ng-click不起作用可能是因为我需要编译注入表格单元格的html.我已经尝试过几种方式,但不幸的是我仍然很有角度,我似乎不明白我是如何做到这一点的.我真的需要帮助.

这是我的指示:

dialogApp.directive('myTable', function ($compile) {
return {
    restrict: 'E, A, C',
    link: function (scope, element, attrs, controller) {
        var dataTable = element.dataTable(scope.options);

        scope.$watch('options.aaData', handleModelUpdates, true);

        function handleModelUpdates(newData) {
            var data = newData || null;
            if (data) {
                dataTable.fnClearTable();
                dataTable.fnAddData(data);
            }
        }
    },
    scope: {
        options: "="
    }
};}); 

控制器:

dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = "coisas";
$scope.botaoEdit = function(a){
    console.log(a);
};

$scope.options = {
    "sDom": '<"H"lf>t<"F"ip>',
    "bStateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true, …

我正在研究一个小的angularjs应用程序.我有一个按钮,我正在使用2个事件,ng-click和onlick.它运作正常,没有问题,但我想确保100%我做得很好,我的做法是对的吗？它是否允许在按钮状态事件中将它们组合在一起？

当使用ng-if时,为什么第二个按钮不起作用？

我想实现一个按钮,只有当模型值设置为/"/"时才会出现.

模板:

<input type="text" ng-model="blub"/>
<br/>
<button ng-click="blub = 'xxxx'">X</button>
<br/>
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button>

控制器:

angular.module('test', [])
.controller('Main', function ($scope) {
    // nothing to do here
});

玩耍: JSFiddle

我有一个使用AngularJS创建的表单元素,其中包含一个提交按钮,我想将此按钮放在此表单之外.我怎么能用Angular做到这一点并让我的表格仍然有效？

例如主要的HTML代码:

<div class="sd-chk-steps" ng-show="!step_03" ng-hide="step_03">

<!-- Panel Address -->
<div id="sd-p-chk-1" class="large-8 columns sd-p-chk">
  <div class="cover step_complete" ng-show="step_01" ng-hide="!step_01">
  </div>
  <sd-panel-address >
  <!-- first form -->
  </sd-panel-address>
</div>
<!-- /. Panel Address -->

<!-- Panel delivery -->
<div id="sd-p-chk-2" class="large-8 columns sd-p-chk">
  <div class="cover" ng-show="!step_01" ng-hide="step_01"></div>
  <sd-panel-delivery>
  <!-- second form -->
  </sd-panel-delivery>
  <div class="cover step_complete" ng-show="step_02" ng-hide="!step_02"></div>
</div>
<!-- /. Panel delivery  -->

<!-- Panel payment -->
<div id="sd-p-chk-3" class="large-8 columns sd-p-chk">
  <div class="cover" ng-show="!step_02" ng-hide="step_02"></div>
  <sd-panel-payment>
  <!-- third …

所以我有一个我正在研究的项目,它要求我使用jsPlumb进行图形元素连接,而我正在使用AngularJS完全构建我的应用程序.

如果我想将另一个库的代码包含到我的控制器中(以激活一些jsPlumb代码,比如ng-click)或我的AngularJS代码的任何其他部分,可以遵循的步骤是什么？我应该这样做还是为什么不这样做？

我正在尝试进行变量替换,同时使用ngClick进行可点击.

我做了一个plunker演示(点击按钮,观察输入框保持不变)

标记:

<body ng-controller="Ctrl">
  <input type="text" id="input" name="input" ng-model="myValue" test>
  <p translate="VARIABLE_REPLACEMENT" translate-values="{{ 'translationData' }}"></p>
  <p ng-bind-html="alink"></p>
</body>

角度的东西:

var translations = {
  VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};

var app = angular.module('myApp', ['pascalprecht.translate', 'ngSanitize']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider.translations(translations);
}]);

app.controller('Ctrl', ['$scope', '$sce', function ($scope, $sce) {
  $scope.translationData = { name: 'foo'};

  $scope.setValue = function(value) {
    $scope.myValue = value;
  };
}]);

app.directive('test', ['$translate', '$sce', function ($translate, $sce) {
  return { …

在页面加载时,我有一个调用服务的控制器,然后将返回的数据绑定到某些$ scope.objects:

app.controller("MainController", function($scope, $http, serviceGetData) {

    serviceGetData.getData(function(data) {
        $scope.LoginCount = data.LoginCount;
        $scope.ProductInfo = data.ProductInfo;
        $scope.ProfileInfo = data.ProfileInfo;

        // Delayed binding
        $scope.OrderHistory  = { History: [] };
    }

    $scope.populateModel = function(model, values) {
        var isArray = $.isArray(values);

        $.each(values, function(key, value) {

            if (isArray) {
                key = this.key;
               value = this.value;
            }

            if (model[key] !== value) {
                model[key] = value;
            }

        });
    };
}

在我的HTML中,我尝试通过以下方式绑定$ scope.OrderHistory:

<h1><a href="#" ng-click="populateModel(OrderHistory  , { History: OrderEntries })" >View order details</a></h1>

这在笔记本电脑/台式机上观看时很好,但在平板电脑和移动设备(如iphone/ipad)中无法正常工作

我在mycontroller中有这个代码我会将它添加html()到我的html中,所有这一切只是ng-click dos不起作用!你有一个想法为什么ng-click dos不起作用

 var html='<div ng-click="selectedValue('+Value+')">Value</div>' ;
     $('#myDiv').html(html);

   $scope.selectedValue = function(value){
     $scope.val =value;

  };

我必须使用ng-click函数selectedValue选择div中显示的值