I am currently facing a situation involving the use of a kendo editor.
Controller One
app.controller('FirstController', ['$scope', function($scope) {
$scope.Html = "<div> Hello World</div>";
}
Second Controller for Template
app.controller('SecondController', ['$scope', function($scope) {
$scope.Options= [{Options1, Option2}];
}
Custom Directive
app.directive('htmlEditor', ['$http', function($http) {
return {
restrict: 'EA',
replace: true,
scope: {
documentName: "="
},
link: function (scope, element, attr) {
$http.get("ngview/TemplateEditor.html")
.success(function (data) {
element.html($compile(data)(scope));
});
}
}
}]);
TemplateEditor.html (Using SecondController in Template)
<div ng-controller="SecondController">
<textarea kendo-editor k-ng-model="documentName" k-encoded="false" k-
options="{{Options}}"></textarea>
</div>
Page HTML (Utilizing FirstController)
<div ng-controller="FirstController" class="col-md-8">
<div html-editor="HtmlEditor"
document-name="Html">
</div>
</div>
If I update the HTML with different text like changing "Hello World" to "Hello Every Body," it always displays the initial value that was assigned:
$scope.Html = "<div> Hello World</div>";
Check out this JSFiddle example: https://jsfiddle.net/aqdasiftekhar/HB7LU/19160/