在编译带有$compile指令的指令后,控制器的作用域未定义的问题一般是由于作用域的绑定不正确导致的。下面是一个解决该问题的代码示例:
HTML模板:
控制器:
app.controller('MyController', function($scope) {
$scope.message = 'Hello World';
});
自定义指令:
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
link: function(scope, element) {
// 创建一个新的作用域
var childScope = scope.$new();
// 在新的作用域中定义一个属性
childScope.message = 'Hello Directive';
// 编译指令并将作用域与元素进行绑定
$compile(element)(childScope);
}
};
});
在上面的示例中,我们通过在自定义指令中创建一个新的作用域,并在该作用域中定义了一个属性message
。然后,我们使用$compile服务将指令元素与新的作用域进行绑定。这样,指令中的模板就可以使用该作用域中的属性了。
请注意,在编译指令之前,我们使用scope.$new()
方法创建了一个新的作用域。这是因为如果直接使用父作用域,会导致指令和控制器之间的作用域混乱。
这样,当编译带有$compile指令的指令后,控制器的作用域就会正确地定义并可用。