javascript - 没有模板的 AngularJS 指令并共享父范围的更新

Question

我有一个非常简单的要求，其中一个指令被放置在 ng-repeat 中，我想将指令的更改下推，以便它更新 UI。这意味着我想要链接函数中的 Contact(不仅仅是字符串引用实际对象) 的值，这样我就可以渲染 UI，并在 contact 中的 contact 发生变化时更改我的 UI父ng-repeat。

我创建了一个非常 simplified version 我想要实现的目标。它有一个联系人列表(在 link by Mark 的帮助下进行研究后，我知道 ng-repeat 创建了自己的范围，所以我添加了一个名为 deep 的对象，它是一个对象不是原始的)，我正在努力解决这个问题。我也尝试过使用其他可能的选择。我不想在指令中粘贴带有 ng-show/ng-class 内容的模板，因为业务逻辑很棘手，所以使用链接函数更容易做到这一点。我确信这与 scope 和/或 $observe 有关，但我不知道如何对此进行排序。另请注意，这是我想要实现的目标的更简单版本。我实际上想要该对象的值来呈现我的 UI。

<强> My Fiddle Example 当您单击“更新名称”时，您会看到外部重复项已更新，而内部重复项已更新。

<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);
             }
        );
      }
    }
  }]);

Answer 1

如果您采用以下方法，则可以删除指令中的 $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);
        }
    }
}]);

Working Demo