angularjs dom 基于按钮点击的操作

Question

基本上我想根据我点击的按钮更改属性值，这是两个按钮

<button ng-click="fn(a)"></button>
<button ng-click="fn(b)"></button>

然后我有一个将值作为输入的预建指令，

<div directive-name="" id="abc"></div>

如果我点击第一个按钮，我想要基于点击按钮的指令值。

我之前做了什么；

$scope.go = function(data){
if(data==a){
var b =  document.querySelector( 'div' );
b.setAttribute("directive-name","value");
}
else{}
}

这里的问题是它正在选择文档的第一个 div 并为其设置属性值。我也尝试用 id 传递它

var b = angular.element(document.querySelector('#abc'));

我也看到了一些自定义指令这样做，但它们不起作用

AngularJS DOM Manipulation through Directives

如果可能的话给我一个 plunkr 或 fiddle

的演示

如果我想根据点击的按钮更改 css 属性的 div

提前致谢

Answer 1

你可以这样做。将 directive-name 值分配给 $scope.variable，然后使用 variable 作为 HTML.

中的值

HTML - 1:

<button ng-click="go(a)"></button>
<button ng-click="go(b)"></button>

HTML - 2:

<div directive-name="{{directive}}" id="abc"></div>

JS:

$scope.go = function(data){
  if(data==a){
    $scope.directive = "directive-1";
  }else if(data==b){
    $scope.directive = "directive-2";
  }
}

要将 class 名称分配给 div，您可以定义其他 $scope.classVar，然后在 HTML 中使用它，如下所示：

<div directive-name="{{directive}}" id="abc" ng-class="classVar"></div>

希望这能解决您的问题。

Answer 2

这应该有效，（您的代码中有一些错误）：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.fn = function(data,id) {
    if (data == 'a') {
      var b = document.querySelector('#'+id);
      b.setAttribute("directive-name", "value");
    } else {
    }
  
}
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <div directive-name="" id="abc"></div>
    <button ng-click="fn('a','abc')">A</button>
  </div>

Answer 3

"Basically I want to change the attribute value based on the button I clicked."

您可以通过 angular 方式更改属性值，引用 $scope 的属性或模板中的控制器实例来实现。单击按钮时，将变量设置为您需要传递给指令的值。

注意： 当您将一个值传递给您的 ngClick 指令时，您需要将其作为字符串传递，除非 a 和 b 被声明为 $scope.

的属性

这是一个基本示例：

// app.js
(function() {

  'use strict';

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

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['$scope'];

  function MainController($scope) {

    $scope.fn = fn;

    function fn(data) {
      // set the value so it's accessable in the view
      // therefore we can pass it into our directive
      $scope.myVar = data;
    }

  }

})();

// directive-name.directive.js
(function() {

  'use strict';

  angular.module('app').directive('directiveName', directiveNameDirective);

  function directiveNameDirective() {
    return {
      restrict: 'A',
      scope: {
        directiveName: '='
      },
      template: '<span>directiveName: {{ directiveName }}</span>'
    };
  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app">

  <div ng-controller="MainController as MainCtrl">

    <!-- here we pass a and b as strings otherwise they get evaluated as variables -->
    <button ng-click="fn('a')">Set a</button>
    <button ng-click="fn('b')">Set b</button>

    <hr>

    <!-- here we pass myVar which is declared as a property of $scope when the fn function is called -->
    <div directive-name="myVar" id="abc"></div>

    <hr> myVar: {{ myVar }}

  </div>

</div>

angularjs dom 基于按钮点击的操作

angularjs dom manipulation based on button click

dom

angularjs

angularjs-directive