Angular - 编译指令后无法访问控制器方法
Angular - Can't access controller methods after compiling directive
我正在大量修改所见即所得的js插件,并将我自己的自定义元素插入其中。为了插入自定义元素,我正在使用指令,以便在需要进行更改时可以轻松维护它们。以下是到目前为止我的代码示例:
所见即所得编辑器的初始加载:
<div ng-controller="wyswiygCtrl">
<textarea wysiwyg-editor ng-model="content"></textarea>
</div>
以下是我插入到所见即所得内容的自定义元素(指令)的示例:
<wysiwyg-element class="custom_element" name="awesome" type="checkbox" checked="true"></wysiwyg-element>
我在指令的初始化中使用以下代码来编译其中的任何自定义元素(指令):
var e = angular.element(wysiwygEditor.get(0).innerHTML);
$compile(e.contents())(scope);
wysiwygEditor.html(e);
它按照我的需要编译指令,但棘手的部分来了。我需要能够从外部角度调用"所见即所得的Ctrl"中的函数。我可以在编译之前执行此操作,但由于某种原因,在使用 angular 的编译函数后,我无法访问元素上的范围。
这是在$compile
之前工作的代码:
angular.element($('.custom_element')).scope().wysiwygModal();
angular.element($('.custom_element')).scope().$apply();
$compile后尝试调用 wysiwygModal
函数后出现以下错误:
Uncaught TypeError: Object #<Object> has no method 'wysiwygModal'
我做错了什么?
我能够在编译的元素上访问scope()
及其变量。 如果这没有帮助,您可以编辑此 plunkr 或创建自己的吗?
http://plnkr.co/edit/kvbvKXeVjEhmeE7257ly?p=preview
脚本.js
var myApp = angular.module('myApp', []);
myApp.directive('myEditor', function () {
return {
restrict: 'E',
scope: {
},
template:
'<div>' +
'<h3>Raw HTML</h3>' +
'<textarea rows=5 cols=40 ng-model="text"></textarea>' +
'</div>' +
'<hr />' +
'<div>' +
'<h3>Compiled HTML</h3>' +
'<div my-preview></div>' +
'</div>' +
'<hr />' +
'<div>' +
'<h3>Messages generated during compilation</h3>' +
'<div ng-repeat="message in messages">[{{message}}]</div>' +
'</div>' +
'</div>',
controller: function ($scope) {
$scope.messages = [];
this.getText = function () {
return $scope.text;
};
this.addMessage = function (message) {
$scope.messages.push(message);
};
this.clearMessages = function () {
$scope.messages.length = 0;
};
},
link: function (scope, element, attrs) {
scope.text = '<div ng-init="a = 2" class="my-selector">'n scope.a : [{{a}}]'n</div>';
}
};
});
myApp.directive('myPreview', function ($compile) {
return {
require: '^myEditor',
link: function (scope, element, attrs, myEditorController) {
scope.$watch(myEditorController.getText, function (newValue) {
if (newValue !== undefined) {
var e = angular.element('<div>' + newValue + '</div>');
$compile(e)(scope);
element.html(e);
myEditorController.addMessage(
'The value of "a" on the scope of the compiled element is: ' +
angular.element($('.my-selector')).scope().a)
}
});
}
};
});
索引.html
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<my-editor></my-editor>
</div>
</body>
</html>
相关文章:
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- CORS:否'访问控制允许来源'header-但是php设置头文件
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- CORS:访问控制允许原点不等于提供的原点
- 飞行前响应中的访问控制允许标头不允许Angularjs请求标头字段访问控制允许标题
- django没有访问控制允许删除原始标头
- HTML5 Canvas访问控制允许原始错误
- Android、iOS和Windowsphone的PHP访问控制
- 访问控制台中的匿名函数
- 访问控制允许标头不允许X-Requested-Wise
- 我如何设置HTTP头“;访问控制允许起源”;用于来自thttpd web服务器的HTTP响应
- 如何通过脚本访问用户控制值
- Ajax—“;访问控制允许起源”;错误
- XMLHttpRequest无法加载url Origin访问控制允许Origin不允许null
- 如何访问访问过的链接历史记录
- 访问允许控制源失败,并带有 www 前缀
- 要在Parse.com中使用plupload,如何访问文件控制对象或base64字符串
- 使用postmessage进行跨域iframe访问-访问被拒绝
- 访问浏览器控制jQuery
- 是否可以访问和控制浏览器的页面大小调整功能?