angularjs - 如何在 AngularJs 中将对象绑定(bind)到 dom 元素

Question

伙计们，我有一些简单的 html，为了便于说明，它看起来像这样，

<div>{{class.name}}</div>
<div>
    <div>{{class.teacher.name}}</div>
    <div>{{class.teacher.age}}</div>
    <div>{{class.teacher.rating}}</div>
</div>

现在您所看到的模型有一个类对象，它有一个名称属性和一个教师属性。我想做的是避免此代码中的重复，以便我的绑定(bind)看起来更像这样。

<div>{{class.name}}</div>
<div some-directive-here="class.teacher">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{rating}}</div>
</div>

angular 是否支持我可以为 dom 元素创建新范围的指令，如上所示？我不想使用 ng-controller，因为它会创建一个新范围并将我与原始模型数据断开连接。

Answer 1

这是一个笨蛋:http://plnkr.co/edit/MqesLIUA1kq1S7BLal3N?p=preview

一个简单的指令，它创建一个新范围并使用其父范围的评估表达式扩展它。

解决方案:

app.directive('newScope', function($parse){
  return {
    scope:true,
    compile: function (tElm,tAttrs){
      var fn = $parse(tAttrs.newScope);

      return function(scope, elm, attrs){
        var property = fn(scope.$parent);
        property = angular.isObject(property) ? property : {};
        angular.extend(scope, property);
      }      
    } 
  }
})