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()是包含在Angular的jqLit​​e中的jQuery方法。附加的事件处理程序中的代码居住的角度之外，所以你需要使用$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; 
}); 

应用JS：

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

HTML：

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