从父控制器的父控制器访问指令变量



我有一个案例使用剑道编辑器

<<p> 第一控制器/strong>
app.controller('FirstController', ['$scope', function($scope) {
  $scope.Html = "<div> Hello World</div>";
}

第二个模板控制器

app.controller('SecondController', ['$scope', function($scope) {
 $scope.Options= [{Options1, Option2}];
}

指令

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(我在模板中使用了SecondController)

<div ng-controller="SecondController">
<textarea kendo-editor k-ng-model="documentName" k-encoded="false" k-     
options="{{Options}}"></textarea>
 </div>

Page HTML(我使用FirstController)

<div ng-controller="FirstController" class="col-md-8">
    <div html-editor="HtmlEditor"
         document-name="Html">
    </div>
</div>

现在,如果对html进行一些更改,并将文本从hello world更改为" hello Every Body"我得到的是相同的值也就是

  $scope.Html = "<div> Hello World</div>";

JSFiddle的例子是https://jsfiddle.net/aqdasiftekhar/HB7LU/19160/

你的代码在plunkr工作的例子将是有用的在这里,但乍一看,似乎问题是:

k-ng-model="documentName"

你的意思可能是:

k-ng-model="{{documentName}}"

将导致documentName解析为Html,因此将textarea绑定到$scope.Html.

所以挣扎了很久,

我通过引用父(SecondController)父(Directive's Scope)父(FirstController)对象到模板文件中的k-ng-model来修改

TemplateEditor.html更改以下代码

<div ng-controller="SecondController">
 <textarea kendo-editor k-ng-model="documentName" k-encoded="false" k-     
 options="{{Options}}"></textarea>
</div>

<div ng-controller="SecondController">
   <textarea kendo-editor k-ng-model="$parent.$parent.$parent.Html" k-  
   encoded="false" k-options="{{Options}}"></textarea>
</div>

经过上述修改后,不再需要指令

中定义的变量
scope: {
        documentName: "="
},

感谢所有试图帮助我的人:-)

最新更新