0

我正在尝试使用角度指令来动态替换页面 portlet 的 html 部分。

html portlet 嵌入了 2 个部分。顶部具有从不同后端服务获得的标题 

<div class="headerdiv">
<h3 class='headerclass'> <a href="">Object Heading</a> </h3>
</div>

内容被加载到不同的部分

<div id="objectDiv" ng-controller="ObjectCtrl">
   <div ng-show="object.title" mydirective><b>{{object.title}} </b></div>

   <div element-trigger><b>{{object.name}} </b></div>
   <div element-trigger><b>{{object.description}} </b></div>

 </div>

控制器成功加载细节

添加的新指令是

  app.directive('mydirective', function(){
        return function(scope, elem, attrs){
        //obtain old header
    var oldHeader = angular.element( '.headerdiv .headerclass' );

    //get the new header

    //replace old header with new header
      }
 });

我需要使用 object.title 值动态更改 headerdiv 中的标题。请注意，新指令绑定到正在侦听 object.title div 的字段。

4

1 回答 1

2

我不认为这是指令的正确使用，因为在大多数情况下，指令应该用于影响定义它的元素的功能。

您可以尝试做的是在ObjectCtrltitle 属性上定义一个手表，然后广播消息

$scope.$watch('object.title',function(newValue) {
   $rootScope.$broadcast('titleChanged',newValue);  //You can pass any object too
});

如果您的标头包含在控制器中，则捕获该事件

$scope.$on('titleChanged',function(args) {
    //Code to handle the title update
});

标题的 html 应该具有标题的绑定表达式

<div class="headerdiv">
<h3 class='headerclass'> <a href="">{{title}}</a> </h3>
</div>

注意ObjectCtrl：我不确定 html 的结构，但如果标题和其中的内容使用相同的\共享模型（对象），则不需要这一切。

于 2013-08-10T05:30:43.143 回答