My title says it all. How can I disable the clicking of the ng-repeat rows? Or is it even possible.
Here is a sample code I created:
<div ng-controller="MyCtrl" class="grid">
<div class="header">
<div class="cell">Id</div>
<div class="cell">Name</div>
</div>
<div class="gridBody">
<div ng-class-even="'even'"
ng-class-odd="'odd'"
ng-class="{current: row.current == true}"
ng-click="clicked(row)"
ng-repeat="row in topics" class="row"
ng-disabled="disabled == true">
<div class="cell">{{row.id}}</div>
<div class="cell">{{row.name}}</div>
<div class="cell">{{row.current}}</div>
</div>
</div>
</div>
I also created this jsfiddle to show what I'm struggling with.
Edits:
I have edited my jsfiddle to show more of what im trying to achieve. Hope its clearer now.
http://jsfiddle.net/2jxea6qw/8/
you can do that using a custom directive and a captured event.
The concept is that you subscribe to the $element in link phase of your ClickDisablerDirective the following way:
$element.addEventListener("click", function(e) {
e.stopPropagation()
e.preventDefault()
}, true)
Notice the 'true' param as the last to the addEventListener method: that allows the handler to be notified before any other lower level (bubbling wise) handlers.
Here is the directive in length:
myApp.directive('disableClick', [function() {
return {
restrict:'A',
link: function(scope, element) {
element[0].addEventListener("click", function(e) {
e.stopPropagation()
e.preventDefault()
}, true)
}
}
}])
I updated your fiddle to show how:
http://jsfiddle.net/2jxea6qw/6/
Related
The feature I'm trying to implement is a toggle view source button so the user can view the source of a given element then copy the text.
Using the ngRoute module, my views are coming through ng-view:
<div id="code" ng-view=""></div>
I would like the HTML to be output to:
<div id="html-text-output"></div>
I've tried using the $sanitize function but I'm not sure it is appropriate for my solution. Below is the code currently in my controller:
angular.module('App')
.controller('outputHtmlCtrl', function ($scope, $element, $sanitize) {
$scope.isOutputToggled = true;
var sanatizedHtml = $sanitize($('#email-frame-code').html());
$scope.toggleHtmlOutput = function() {
$scope.isOutputToggled = $scope.isOutputToggled === false ? true: false;
$('#html-text-output').append("<div>"+"'"+sanatizedHtml+"'"+"</div>");
}
});
My markup is below:
<div id="email-frame-code__container" ng-controller="outputHtmlCtrl">
<div class="browser-header">
<span class="browser-header__icon" ng-click="toggleHtmlOutput()"></span>
</div>
<div id="email-frame-code" ng-class="{closed: isOutputToggled}">
<div id="html-text-output"></div>
<div id="code" ng-view=""></div>
</div>
</div>
My end goal for this is like the 'Fancy Version' here: https://css-tricks.com/examples/ViewSourceButton/
But on a target element, not the whole page.
I am trying to construct a directive that adds form groups to a particular div. I'm attempting doing this by binding a directive to a button in my html. My application is VERY simple as this is all I'm trying to do at the moment. Similar to this fiddle Anyway, my app initiates fine and the home controller is included. Also I get 200 status codes on the inclusion of my directive, and my code throws no errors. Here is my html:
<form id="addFields">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-center">
<div addInputFieldsButton></div>
<input id="fieldName" placeholder="Enter field name:"></input>
<button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>
</div>
<div class="col-xs-4">
</div>
</div>
</form>
<div id="reviewFields">
</div>
Notice I am attempting both to add the button that is supposed to add input fields, and just bind the directive that adds input fields to an existing button as an attribute. Neither work.
addInputFields directive:
(function () {
angular.module('reviewModule')
.directive('addInputFields', addInputFields);
addInputFields.$inject = ['$log'];
function addInputFields ($log) {
return function (scope, element, attr) {
$log.debug('binding click event to add review button now.');
element.bind('click', function ($compile) {
$log.debug('button bound.');
angular.element(document.getElementById('reviewFields')).append($compile("<button>YOU MADE A BUTTON, COOL BRO</button>")(scope));
});
}
}
})()
and my directive for attempting to add a button that has the above binding:
(function () {
angular.module('reviewModule')
.directive('addInputFieldsButton', addInputFieldsButton);
addInputFieldsButton.$inject = ['$log'];
function addInputFieldsButton ($log) {
return {
restrict : 'E',
template : '<input id="fieldName" placeholder="Enter field name:"></input>\
<button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>'
};
};
})()
I copied the fiddle almost exactly, and really have no idea why nothing is happening while attempting to use either of these directives. Forgive me if my error is obvious, I am still pretty new to AngularJS.
I believe your second directive is not defined correctly on UI, it should be - separated with smaller case add-input-fields instead of addInputFields.
Code
(function () {
angular.module('reviewModule')
.directive('addInputFieldsButton', addInputFieldsButton);
addInputFieldsButton.$inject = ['$log'];
function addInputFieldsButton ($log) {
return {
restrict : 'E',
template : '<input id="fieldName" placeholder="Enter field name:"></input>\
<button id="addFieldBtn" add-input-fields><span class="glyphicon glyphicon-plus"></span></button>'
//^^^^^^^^^^^^^^^here is change
};
};
})()
I have used ng-click on div and it works as expected, but when I have used ng-blur on some other input, the ng-click on the div stops working.
Working code [addItem(item) is being called on click]
<div ng-controller="TestController">
<input type="text" ng-focus="show=true">
<div ng-show="show" class="choosecont">
Choose from selected
<div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
</div>
<div class="chosencont">
Following are selected
<div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
</div>
</div>
Broken code [addItem(item) not being called]
<div ng-controller="TestController">
<input type="text" ng-focus="show=true" ng-blur="show=false">
<div ng-show="show" class="choosecont">
Choose from selected
<div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
</div>
<div class="chosencont">
Following are selected
<div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
</div>
</div>
Related JS code
angular.module("myApp", [])
.controller("TestController", ["$scope", function($scope) {
$scope.allItems = ["A", "B", "C", "D", "E"];
$scope.selectedItems = [];
$scope.addItem = function(item) {
if ($scope.selectedItems.indexOf(item) == -1)
$scope.selectedItems.push(item);
}
}
]);
Here is plunkr http://plnkr.co/edit/eI5dvczO2E1Cp1SBPgQx?p=preview
Click on input which will bring dropdown. Clicking on dropdown adds item to selected list in one case but not in other case.
I have tried to debug. scope is set correctly and it was accessible.
The click event fires after blur, so the list is being hidden before you are able to click it. The simple solution is to use mousedown event instead of click:
ng-mousedown="addItem(item)"
Here is an update to your plunkr: http://plnkr.co/edit/sPGIb1afCayS1UiP73Q0?p=preview
I have 2 nested ng-repeats. The parent one adds a class to itself based on ng-click, however when I click the child it is still happening when I thought it shouldnt.
<div class="add-filter-tags" data-filter="{{f1}}" ng-class="{'tag_selected' : tag_selected }" ng-repeat="(f1,f2) in filters" ng-click="tag_selected = !tag_selected;">
<span>{{f1}}</span>
<div class="add-filter-tags sub-filter-tag" data-filter="{{f1_2}}" ng-click="$parent.$event.stopPropagation()" ng-repeat="(f1_2,f2_2) in filters[f1]" sibs ><span>{{f1_2}}</span></div>
</div>
EDIT: I have also tried it without $parent and its not working.
You should stop event propagation on the child so that it does not bubble up to the parent, there will be no $event object attached to the $parent as well. It is a special argument passed in with ng-click i.e
ng-click="$event.stopPropagation()"
angular.module('app', []).controller('ctrl', function($scope) {
});
.tag_selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="add-filter-tags" ng-class="{'tag_selected' : tag_selected }" ng-if="true" ng-click="tag_selected = !tag_selected;">
<span>Parent</span>
<div class="add-filter-tags sub-filter-tag" ng-click="$event.stopPropagation()" ng-if="true"><span>Child</span>
</div>
</div>
</div>
I have a rather sophisticated template for Kendo ListView using knockout-kendo.js bindings. It displays beautifully. My problem is that I need to use the visible and click bindings in parts of the template, but I can't get them to work. Below is a simplified version of my template. Basically, deleteButtonVisible determines whether the close button can be seen, and removeComp removes the item from the array.
<div class='template'>
<div >
<div style='display:inline-block' data-bind='visible: deleteButtonVisible, event: {click: $parent.removeComp}'>
<img src='../../../Img/dialog_close.png'></img>
</div>
<div class='embolden'>#= type#</div><div class='label1'> #= marketArea# </div>
<div class='label2'> #= address# </div>
<!-- more of the same -->
</div>
The view model:
function CompViewModel() {
var self = this;
self.compData = ko.observableArray().subscribeTo("compData");
self.template = kendo.template(//template in here);
self.removeComp = function (comp) {
//do something here
}
}
html:
<div class="row" >
<div class="col-md-12 centerouter" id="compDiv" >
<div class="centerinner" id="compListView" data-bind="kendoListView: {data: compData, template: template}"></div>
</div>
</div>
finally, sample data:
{
type: "Comparable",
marketArea: "",
address: "2327 Bristol St",
deleteButtonVisible: true
},
Take in count that the deleteButtonVisible must be a property on the viewModel linked to the view.You are not doing that right now. The click element can v¡be access from the outer scope of the binding and remove the $parent.He take the method from the viewmodel. Take in count that every thing that you take on the vie must be present on the view model for a easy access.