javascript - 如何评估子指令中的 Angular 表达式并将其暴露在父指令中?

标签 javascript angularjs angularjs-directive angularjs-ng-repeat

我有一个代表一组对象的指令,我们称它为people .

该指令有一个 ng-repeat在其重复子指令的模板中,例如person ,它有一个表达式属性 personGreeting应该评估其范围。

两者都是 peopleperson使用隔离范围。

如何设置这些指令,以便我可以公开 personGreetingpeople 上指令并在 person 的范围内对其进行评估指令?

这是一个例子:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.myPeople = [{
      id: 1,
      name: 'Bob'
    }, {
      id: 2,
      name: 'Steve'
    }, {
      id: 3,
      name: 'Joe',
    }]
  })
  .directive('people', function() {
    return {
      scope: {
        peopleList: '=',
        eachPersonGreeting: '&'
      },
      template: '<ul><person ng-repeat="currentPerson in peopleList" person-greeting="eachPersonGreeting(currentPerson)"></person></ul>'
    }
  })
  .directive('person', function() {
    return {
      scope: {
        personDetails: '=',
        personGreeting: '&'
      },
      template: '<li>{{personGreeting(personDetails)}}</li>'
    }
  })
  .directive('people2', function() {
    return {
      scope: {
        peopleList: '=',
        eachPersonGreeting: '@'
      },
      template: '<ul><person-2 ng-repeat="currentPerson in peopleList" person-greeting="{{eachPersonGreeting}}"></person-2></ul>'
    }
  })
  .directive('person2', function() {
    return {
      scope: {
        personDetails: '=',
        personGreeting: '@'
      },
      template: '<li>{{personGreeting}}</li>'
    }
  })
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<body ng-controller="ctrl">
  <h4>Here we are just using an in-line expression with ng-repeat, which works as you'd expect:</h4>
  <ul>
    <li ng-repeat="currentPerson in myPeople">Hello, {{currentPerson.name}}!</li>
  </ul>

  <h4>But what if we have custom directives, `people`, and `person`, and we want to let consumers of our `people` directive specify how each `person` should be greeted without making them override our directive's template, and also have data binding still work?</h4>

  <h4>Unfortunately, this doesn't seem to work:</h4>

  <people people-list="myPeople" each-person-greeting="'Welcome, ' + personDetails.name + '!'"></people>

  <h4>Neither does this:</h4>

  <people-2 people-list="myPeople" each-person-greeting="Welcome, {{personDetails.name}}!"></people-2>
</body>


</html>

我还开始深入研究这两个指令的编译、链接和 Controller 函数,以及 $interpolate 服务,并开始工作,但它变得非常奇怪和困惑,我无法理解数据绑定(bind)工作,所以感觉像是白费力气。我觉得这应该很简单,但似乎并非如此。

有没有一种优雅的方式来做到这一点?

最佳答案

问候语如何取决于用户本身? 有什么方法可以创建知道如何生成定制问候语的服务吗?

如果不是,那么 Proxy 对象呢? https://www.youtube.com/watch?v=AIO2Om7B83s&feature=youtu.be&t=15m1s 我昨天发现了它,从我的 Angular 来看,它似乎适合这里。您应该为每个访客创建代理对象,将其注入(inject)访客指令,并在链接阶段将解析的(由 Angular 完成的)问候语放入注入(inject)的代理对象中。

另外,我认为你正在做的事情可以通过比从外部设置属性并解析它更简单的方式来完成。

关于javascript - 如何评估子指令中的 Angular 表达式并将其暴露在父指令中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27329914/

相关文章:

javascript - 如何轻松确定 $scope.$watch 中添加/删除的内容?

javascript - 为什么绑定(bind)点击事件没有响应?

javascript - react JS : Component Not Exported

javascript - 如何取消下面这个文件上传

javascript - 单个变量行在javascript中意味着什么?

javascript - 向 div 插入值

javascript - 即使绑定(bind)到更深的对象或数组,也使 ngModel 触发 $render

angularjs - ngClick 不会在递归模板中触发

javascript - 将元素添加到带有动画的转发器

python - AngularJS + Django - 主要优点和缺点