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或小提琴演示

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

提前致谢

Answer 1

你可以这样做。将指令名称值分配给$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";
  }
}

要为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

“基本上我想根据我点击的按钮更改属性值。”

您可以通过以角度方式更改属性值，引用$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操作基于按钮单击

3 个答案: