angularjs基於DOM的按鈕操作單擊

基本上我想基於按鈕我點擊更改屬性值，這是兩個按鈕angularjs基於DOM的按鈕操作單擊

<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屬性點擊

在此先感謝

來源

2017-08-22 Ankur Chauhan

它的$ scope.fn =功能（數據）{} –

你可以這樣做。將指令名稱值分配給$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>

我希望這能解決您的問題。

來源

2017-08-22 19:08:20 Nitesh

這應該工作，（你必須在你的代碼中的一些錯誤）： -

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>

來源

2017-08-22 19:12:59

一兩件事我想補充的是，我使用的UI路由，當我點擊一個按鈕以及ui-sref時，它也改變了包含該指令的屬性需要設置的狀態 –

@AnkurChauhan而不是使用ui-sref在控制器內的setattribute改變狀態後使用$ state.go –

「基本上我想改變基於我點擊了按鈕的屬性值。」

您可以通過以角度方式更改屬性值，引用屬性$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>

來源

2017-08-22 19:24:24 cnorthfield

angularjs基於DOM的按鈕操作單擊

回答

相關問題