Basically, I have an input block, that uses Text-Angular* and I needed to wrap it into its own parent directive for easier manual configuration. I am trying to pass values into my directive's scope attributes, down to Text-Angular's directive, but it won't pickup what it needs in its own custom attributes, from the parent one. (it's for synchronization and saving its own state with the entered input from the user) I simply need to bridge the communication between parent and children elements that are separate from one another, while being able to communicate with Text-Angular.
This is the way I tried things. The problem mainly concerns ng-model.
HTML
mainfile.html
<div class="col-sm-12 p-l-0 form-group">
<label for="value" translate="text_language"></label>
<text-angular-wrap ng-model="vm.value.info" id="value" name="value"></text-angular-wrap>
</div>
template-file
It is wrapped in its own controller file.
<div ng-app="textAngularApp" ng-controller="textAngularEditor">
<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics','underline'],['ul','ol'],['indent','outdent']]" ng-model="ngModel" id="{{id}}" name="{{name}}">
</text-angular>
<pre>name: {{name}}</pre>
<pre>id: {{id}}</pre>
<pre>ng-model: {{ngModel}}</pre>
</div>
textAngularWrap.directive.js
(function () {
'use strict';
angular.module("file.UI")
.directive("textAngularWrap", function() {
return {
restrict: "AE",
scope: {
name: "@",
id: "@",
ngModel: "=",
},
templateUrl: helper.directive('TextAngularTemplate'),
require: "ngModel",
link: function($scope, elem, attr, ctrl) {
console.log($scope, elem, attr, ctrl);
$scope.name = attr.name,
$scope.id = attr.id;
$scope.ngModel = attr.ngModel;
}
}
});
})();
textAngular.js
(function () {
'use strict';
var textAngular = angular.module("textAngularApp", ['textAngular']);
textAngular.config(['$provide', function ($provide) {
$provide.decorator('taOptions', ['$delegate', function (taOptions) {
taOptions.defaultTagAttributes.a.target = '_blank';
taOptions.defaultTagAttributes.a.content = '';
return taOptions;
}]);
}]);
textAngular.controller('textAngularEditor', ['$scope', 'textAngularManager',
function textAngularEditor($scope, textAngularManager) {
$scope.htmlcontent = null;
$scope.disabled = false;
}]);
})();
I tried everything I could find, to trying to pass it down to the controller file, to trying to pass it in diverse ways with the directive, to play around with parent and children linking and nothing works.
ng-model in text-angular simply won't pickup whatever I pass down from the parent directive. It stays the same as "ngModel" in the inspector.
I'm out of ideas. How do I pass stuff down to a directive I cannot access?
