Javascript AngularJS指令，无模板，共享父范围的更新

我有一个非常简单的要求，指令放在一个ng repeat中，在这里我想向下推指令的更改，以便它更新UI。这意味着我希望在我的链接函数中包含联系人的值（而不仅仅是字符串引用实际对象），这样我就可以在联系人在父ng repeat中更改时呈现UI并更改UI

我已经为我想要实现的目标创造了一个非常强大的平台。它有一个联系人列表（在借助此进行研究后，我知道ng repeat创建了自己的范围，因此我添加了一个名为deep的对象，它不是原始对象），我正在努力对其进行排序。我还试着使用其他可能的选择。我不想在指令中粘贴带有ng show/ng class内容的模板，因为业务逻辑很复杂，所以使用link函数更容易实现。我确信这与范围和/或$observe有关，但我不知道如何排序。还要注意，这是我想要实现的一个更简单的版本。实际上，我希望该对象的值能够呈现我的UI

当您单击更新名称时，您将看到外部重复更新内部

<div>
  <div ng-controller="ContactsCtrl">
    <ul>
        <li ng-repeat="contact in contacts">
            <div zippy="contact">a</div>            
        </li>
    </ul>
    <br />
    <p>Here we repeat the contacts to ensure bindings work:</p>
    <br />
    <ul>
        <li ng-repeat="contact in contacts">
            {{contact.name}} : {{contact.deep}}
        </li>
    </ul>    
  </div>
</div>



var app = angular.module( 'myApp', [] );
app.controller('ContactsCtrl', function ( $scope ) {      
    $scope.contacts = [
                        { name: 'Sharon',deep:{A:"a"}},
                        { name: 'Steve',deep:{A:"b"}},
                        { name: 'Scott',deep:{A:"c"}}
    ];

    $scope.primitiveTest=function(c){c.name=c.name+c.name; }    
    $scope.objectTest=function(c){c.deep={A:c.deep.A+c.deep.A};  }
});
app.directive('zippy',  ['$compile', function ($compile){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {       

          /*scope.$watch(attrs.zippy, function(newValue, oldValue){
                alert('asd');
            });

          attrs.$observe('deep',function(val){ alert('asd'); });*/
        scope.$watch(attrs['zippy'],
             function (ideaNode) {      
                 var html = [];
                 html.push('<hr/><div class="clearfix" id="vote-icons" ng-click="primitiveTest('+attrs['zippy']+');" >Update Name </div> - <div class="clearfix" id="vote-icons" ng-click="objectTest('+attrs['zippy']+');">UpdateObject');              
                 html.push('</div>');
                 html.push(JSON.stringify(ideaNode));                
                 element.html(html.join(''));
                 $compile(element.contents())(scope);
             }
        );
      }
    }
  }]);

A.




在这里，我们重复接触以确保绑定工作：





{{contact.name}}:{{contact.deep}


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'ContactsCtrl'，函数（$scope）{
$scope.contacts=[
{name:'Sharon'，deep:{A:'A}}，
{姓名：'Steve'，deep:{A:'b}}，
{name:'Scott'，deep:{A:'c}}
];
$scope.primitiveTest=函数（c）{c.name=c.name+c.name；}
$scope.objectTest=函数（c）{c.deep={A:c.deep.A+c.deep.A}；}
});
app.directive（'zippy'，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（作用域、元素、属性）{
/*范围.$watch（attrs.zippy，函数（newValue，oldValue）{
警报（“asd”）；
});
属性$observe（'deep'，function（val）{alert（'asd'）；}）*/
范围：$watch（attrs['zippy']，
函数（ide阳极）{
var html=[]；
push（“
更新名称-UpdateObject”）；
html.push（“”）；
push（JSON.stringify（ideaNode））；
html（html.join（“”））；
$compile（element.contents（））（范围）；
}
);
}
}
}]);

如果采用以下方法，可以删除指令中的$watch

您应该使用对象插值

html.push（“{{{”+attrs['zippy']+“}”）而不是序列化的纯文本字符串

app.directive('zippy', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var html = [];
            html.push('<hr/><div class="clearfix" id="vote-icons" ng-click="primitiveTest(' + attrs['zippy'] + ');" >Update Name </div> - <div class="clearfix" id="vote-icons" ng-click="objectTest(' + attrs['zippy'] + ');">UpdateObject');
            html.push('</div>');
            html.push("{{" + attrs['zippy'] + "}}");
            element.html(html.join(''));
            $compile(element.contents())(scope);
        }
    }
}]);

app.directive（'zippy'，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var html=[]；
push（“
更新名称-UpdateObject”）；
html.push（“”）；
push（“{{”+attrs['zippy']+“}}”）；
html（html.join（“”））；
$compile（element.contents（））（范围）；
}
}
}]);

谢谢！这很有效。但在我的实际示例中，我需要attrs['zippy']的值，这是一个多级对象，因此我可以基于其中的各种属性呈现UI。有什么想法吗？@Kusek如果对象在作用域中，你可以尝试
html.push（{{{scope[attrs['zippy']]+“}”）我很好奇我们是否能够对此进行单元测试？