Próbuję edytować widok poza elementem ng-controller
. Udało mi się go rozwiązać za pomocą $rootScope
i manipulacji domem, ale chcę wiedzieć, jak można go rozwiązać dzięki natywnym angularjs?Kontroler zewnętrzny modelu ng
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>
JS:
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('');
};
}
tutaj jest Przykład
Czy jest jakiś problem z utrzymaniem tag wejściowy edycji w kontrolerze ? – aa333
Czy wiesz, że możesz utworzyć wiele zakresów w swojej aplikacji Angular, jedną zagnieżdżoną w drugiej? Następnie daj każdemu swój własny kontroler, abyś mógł zrealizować ten "kątowy sposób". – Blazemonger
Dzięki. @Blazemonger możesz pokazać przykład z wieloma zakresami? – Webeith