When I change value on scope within this "jstree" directive code(directives link function - adds a plugin to redraw jstree nodes which adds buttons to every item in the tree with onclick for mode change):
link: function(scope, element, attrs) {
scope.selectedNode = scope.selectedNode || {};
scope.treeUrl = scope.treeUrl || 'treeUrl';
var treeElement = $(element);
var link = document.createElement('i');
//jstree plugin to rewrite node
$.jstree.plugins.noderewrite = function (options, parent) {
this.redraw_node = function (obj, deep, callback) {
obj = parent.redraw_node.call(this, obj, deep, callback);
if (obj) { //obj is listitem of the tree
var tmp = link.cloneNode(true);
tmp.href = "javascript:void(0)";
tmp.className = "glyphicon-pencil";
tmp.style = "cursor: pointer;";
tmp.onclick = function () {
scope.mode = "edit";
}
obj.insertBefore(tmp, obj.childNodes[2]);
var tmp2 = link.cloneNode(true);
tmp2.href = "javascript:void(0)";
tmp2.className = "glyphicon-plus";
tmp2.style = "cursor: pointer;";
tmp2.onclick = function () {
scope.mode = "add";
}
obj.insertBefore(tmp2, obj.childNodes[2]);
}
The watch code in the controller is not called:
var TreeController = [
'$scope', 'stateService', '$timeout',
function ($scope, stateService, $timeout) {
$scope.treeUrl = "...";
$scope.selectedTreeNode = {};
$scope.mode = 'view';
var previousSelection;
$scope.watch('mode', function (name, oldVal, newVal) {
stateService.go(newVal);
});
There is also a strange behavior between browsers. In firefox 36.0.1 (windows) everything works. In firefox can be used just $scope.watch without $, but in chrome I get error. The code in the watch is not called in chrome. I tried deep watch, eg. watch with third param true, with no results. Probably it is not a good idea to use watch, instead i should inject my state service into directive and use it directly instead of watch. Maybe I am just not doing it the Angular way.