Question

LIVE DEMO

Учитывая следующие две директивы:

JS:

angular.module("Directives", []).directive("action", function($compile) { 
    return { 
    restrict: 'A', 
    scope: { 
     action: '=' 
    }, 
    link: function(scope, element) { 
     scope.showDialog = false; 

     var template = "<span dialog='showDialog'>Dialog</span>"; 

     element.append($compile(template)(scope)).on('click', function() { 
     console.log("Setting showDialog to true"); 
     scope.showDialog = true; 
     }); 
    } 
    }; 
}).directive("dialog", function() { 
    return { 
    restrict: 'A', 
    scope: { 
     dialog: '=' 
    }, 
    link: function(scope, element) { 
     element.hide(); 

     scope.$watch('dialog', function(newValue) { 
     console.log("dialog changed to " + newValue); // Not called on button click 
     }); 
    } 
    }; 
}); 

HTML:

<button action>Click Here</button> 

Не могли бы вы объяснить, почему установка action 'ы showDialog не вызывает dialog' наблюдатель?

Answer 1

.on() - метод jQuery, включенный в jqLite Angular. Код внутри прикрепленного обработчика событий живет вне Угловое, так что вам нужно использовать $apply:

$ применяются() используется для выполнения выражения в угловой из-за пределов угловой рамочным. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы вызываем в угловой каркас, нам необходимо выполнить правильный жизненный цикл обработки исключений, выполняющих часы.

Например:

element.append($compile(template)(scope)).on('click', function() { 
    scope.$apply(function() { 
    console.log("Toggling showDialog"); 
    scope.showDialog = !scope.showDialog; 
    }); 
}); 

Демо: http://jsbin.com/guziwamu/4/edit

Answer 2

я сделал некоторые изменения в более распространенный способ его написания и я переместил element.hide(); после регистрации $ часов и она работала хорошо

app.directive("action", function ($compile) { 
function link(scope, element, attrs) {  
    var template = "<span dialog='showDialog'>Dialog</span>"; 

    element.append($compile(template)(scope)).on('click', function() { 
     console.log("Setting showDailog to true"); 
     scope.showDailog = !scope.showDailog; 
    }); 
} 

return { 
    link: link 
}; 
}); 

app.directive("dialog", function ($compile) { 
function link(scope, element, attrs) { 

    scope.$watch(attrs.dialog, function (newValue) {    
     console.log("dialog changed to " + newValue); // Not called on button click 
    }); 

    element.hide(); 
} 

return { 
    link: link 
}; 
}); 

контроллер:

app.controller('MyController', function ($scope) { 

$scope.showDailog = false; 
}); 

App JS:

var app = angular.module('MyApp', []); 

HTML:

<button action>Click Here</button> 
     Show dialog: <input data-ng-model="showDailog">