基于按钮点击的angularjs dom操作

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

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

这里的问题是，它正在选择文档的第一个div并为此设置属性值。 我也试着用我喜欢的方式通过它

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

我还看到了一些自定义指令，但它们不起作用

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

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

提前谢谢

你可以这样做。 将指令名称值分配给

$scope.variable

，然后使用

variable

作为HTML中的值

HTML-1：

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

要将类名分配给div，您可以定义其他

$scope.classVar

，然后在HTML中使用它，如下所示：

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

我希望这能解决你的问题。

你可以这样做。 将指令名称值分配给

$scope.variable

，然后使用

variable

作为HTML中的值

HTML-1：

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

要将类名分配给div，您可以定义其他

$scope.classVar

，然后在HTML中使用它，如下所示：

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

我希望这将解决您的问题。

这应该可以工作（您的代码中有一些错误）：-

var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.fn=函数（数据，id）{
如果（数据=='a'）{
var b=document.querySelector（“#”+id）；
b、 setAttribute（“指令名”、“值”）；
}否则{
}
}
});

A.
这应该可以（您的代码中有一些错误）：-


var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.fn=函数（数据，id）{
如果（数据=='a'）{
var b=document.querySelector（“#”+id）；
b、 setAttribute（“指令名”、“值”）；
}否则{
}
}
});

A.
“基本上，我想根据单击的按钮更改属性值。”

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

注意：将值传递到指令时，需要将其作为字符串传递，除非
a
和
b
声明为
$scope
的属性

以下是一个基本示例：


//app.js
（功能（）{
"严格使用",；
角度模块（'app'，[]）；
})();
//main.controller.js
（功能（）{
"严格使用",；
角度。模块（'app'）。控制器（'MainController'，MainController）；
主控制器。$inject=['$scope']；
功能主控制器（$scope）{
$scope.fn=fn；
功能fn（数据）{
//设置该值，使其在视图中可访问
//因此，我们可以将其传递到我们的指令中
$scope.myVar=数据；
}
}
})();
//指令-name.directive.js
（功能（）{
"严格使用",；
角度.module（'app'）.directive（'directiveName'，directiveNameDirective）；
函数directiveNameDirective（）{
返回{
限制：“A”，
范围：{
directiveName:'='
},
模板：'directiveName:{{directiveName}}'
};
}
})();

设定
b组

myVar:{{myVar}
“基本上，我想根据单击的按钮更改属性值。”

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

注意：将值传递到指令时，需要将其作为字符串传递，除非
a
和
b
声明为
$scope
的属性

以下是一个基本示例：


//app.js
（功能（）{
"严格使用",；
角度模块（'app'，[]）；
})();
//main.controller.js
（功能（）{
"严格使用",；
角度。模块（'app'）。控制器（'MainController'，MainController）；
主控制器。$inject=['$scope']；
功能主控制器（$scope）{
$scope.fn=fn；
功能fn（数据）{
//设置该值，使其在视图中可访问
//因此，我们可以将其传递到我们的指令中
$scope.myVar=数据；
}
}
})();
//指令-name.directive.js
（功能（）{
"严格使用",；
角度.module（'app'）.directive（'directiveName'，directiveNameDirective）；
函数directiveNameDirective（）{
返回{
限制：“A”，
范围：{
directiveName:'='
},
模板：'directiveName:{{directiveName}}'
};
}
})();

设定
b组

myVar:{{myVar}
its$scope.fn=function（data）{}its$scope.fn=function（data）{}我想补充的一点是，我正在使用ui路由，当我在ui sref中单击一个按钮时，它也会更改包含需要修改其属性的指令的状态set@AnkurChauhan不使用ui sref use$state.go在控制器内部的setattribute之后更改状态，我想添加的另一件事是，我使用的是ui路由，当我在ui sref中单击一个按钮时，它也会更改包含需要修改其属性的指令的状态set@AnkurChauhan不要使用ui sref，而是使用$state.go在控制器内的setattribute之后更改状态
$scope.go = function(data){
  if(data==a){
    $scope.directive = "directive-1";
  }else if(data==b){
    $scope.directive = "directive-2";
  }
}

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