ng-型外控制器
ng-型外控制器
提问于 2014-12-15 14:41:43
我正在尝试编辑ng-controller元素之外的视图。我能够通过使用$rootScope和dom操作来解决这个问题，但是我想知道如何用本地的angularjs来解决这个问题？
Html：
<body>
<div class="container">
<div class="block" ng-controller="BlockController as block">
<div><strong>Name:</strong> {{ block.name }}</div>
<a href ng-click="block.edit()">Edit</a>
</div>
</div>
<div class="container-editor">
<div id="block-editor"></div>
</div>
</body>联署材料：
angular.module('app', [])
.controller('BlockController', BlockController);
function BlockController($compile, $scope)
{
this.name = 'default name';
this.edit = function() {
var $editor_html = ' <input type="text" ng-model="block.name" name="name" /> <a href ng-click="block.save()">Save</a>';
$editor_html = $compile($editor_html)($scope);
angular.element(document.querySelector("#block-editor")).html('').append($editor_html);
};
this.save = function() {
// save block
angular.element(document.querySelector("#block-editor")).html('');
};
}plnkr
这是一个例子
回答 1
Stack Overflow用户
发布于 2014-12-16 23:37:21
更多的角度？只是使用指令。基本上，您可以在子指令中获得父指令的控制器*。将父控制器视为其子/子控制器的API。
.directive('parent', function() {
return {
controller: function() {
this.catchChild = function(child) {
// code...
};
}
};
})
.directive('child', function() {
return {
require: '^parent',
link: function($scope, $element, $attrs, parentController) {
$scope.jump = function() {
// I'm jumping...
parentController.catch($scope);
};
}
};
})我为您更新了您的plnkr：http://plnkr.co/edit/qRURHRMWt9K5acLWmCHv?p=preview
(*)可以将多个指令作为数组传递
angular.module('app', [])
.directive('parent1', function() {
return {
controller: function() {
this.fn1 = function(child) {
// code...
};
}
};
})
.directive('parent2', function() {
return {
controller: function() {
this.fn2 = function(child) {
// code...
};
}
};
})
.directive('child', function() {
return {
require: ['^parent1', '^parent2'],
link: function($scope, $element, $attrs, controllers) {
var parent1Controller = controllers[0];
var parent2Controller = controllers[1];
parent1Controller.fn1();
parent2Controller.fn2();
}
};
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27486519
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号