将角度绑定控制器添加到新范围

我正在尝试使用React js和Angular迭代项目，并构建所需的模板，因为我正在以角度方式进行速度/组织问题。我遍历一系列项目，并为每个项目创建新的子范围，并使用该数据构建标记。我的问题是，有没有办法将新添加的子作用域附加到现有的控制器，以便连接控制器所具有的任何方法/变量？将角度绑定控制器添加到新范围

以下是可以访问父范围并创建子范围的React标记。例如，我想绑定一个示例控制器名称“CtrlItem”。这种事情可能吗？

var feedRepeat = React.createClass({ 
    render: function() { 
     var template, 
      parent = this.props.scope, 
      child; 

     return (
      <div> 
       {parent.items.list.map(function(item, i) { 
        if (!MVItems[item.type]) { return false; } 

        template = MVItems[item.type]; 
        child = parent.$new(true) 
        child.data = item; 

        return (
         <template scope={child} /> 
        ) 
       }, this)} 
      </div> 
     ) 
    } 
}) 

var MVItems = Object of templates...

更新
这里的角惹我试图解决。基本上我通过ng-include加载了一个额外的模板，因为角度不会让我在指令实例化时加载动态模板。我觉得必须有一个更好的办法来编译比用模板NG-包括或NG开关

// main-view.html 
<div class="results"> 
    <article ng-repeat="item in items.list" class="item" ng-class="item.type"> 
     <div ng-include="'views/items/' + item.type + '-template.html'" class="inner"></div> 
    </article> 
</div> 

// soundcloud-template.html 
<soundcloud-music-item item="item"></soundcloud-music-item> 

// the directive 
myApp.directive 'soundcloudMusicItem', [ -> 
    restrict: 'E' 
    scope: 
     item: '=' 
    controller: 'soundcloudMusic' 
    templateUrl: 'views/items/soundcloud-music-item.html' 
    link: (scope, el, attr, ctrl) -> 
]

我试图做的是切断其干脆加载的SoundCloud，template.html。

来源

2014-02-19 Marius Miliunas

我很想知道你用角度方法遇到的速度/组织问题。 –

我现在没有角度的应用程序设置，但是您是否尝试让函数根据本地$ scope（应该是该项目）返回指令中生成的模板路径？

// the directive 
myApp.directive 'item', ['$scope', ($scope) -> 
    restrict: 'E' 
    scope: 
     item: '=' 
    templateUrl: -> return 'views/items/'+$scope.type+'-item.html' 
    link: (scope, el, attr, ctrl) -> 
]

该指令在这种情况下是一个通用指令，称为'item'左右。

你可以对控制器做同样的事情，但我的问题是，你真的需要绑定到指令的控制器吗？

来源

2014-02-21 22:55:25

什么，我需要包括'$ scope'作为依赖项之一，因为现在它会抛出一个错误，因为它是未定义的 –

找到了一种方法做什么，我试图与反应，包括同做反应的代码，我上面有，我保存的角度编译依赖，它保存到棱角分明的机身，并呼吁反应过来渲染，如：

myApp.controller 'MainCtrl', ['$scope', 'fetcher', '$compile', ($scope, fetcher, $compile) -> 
    $scope.$root.activeScope = $scope 
    angular.$compile = $compile 

    $scope.items = 
     list: [] 
     more: true 

    fetcherCallback = (latest, callback) -> 
     $scope.items.list = $scope.items.list.concat(latest) 
     offset = $scope.items.list.length 
     $scope.items.more = true 
     callback(latest) if callback 

     React.renderComponent feedRepeat(scope: $scope), document.getElementById('feedRepeat')

然后使用反应迭代器我叫每个模板，在模板安装后每个模板，我编了HTML基于给定的选择，并通过像新的范围：

/** @jsx React.DOM */ 

var MVItems = MVItems || {}; 

MVItems.soundcloud_favorite = React.createClass({ 

    componentDidMount: function() { 
     // grab the selector 
     this.selector = document.querySelector('[data-reactid="' + this._rootNodeID + '"]'); 

     // connect it with Angular's infrastructure so we can use the contollers 
     angular.$compile(this.selector)(this.$scope); 
    }, 

    render: function() { 
     this.$scope = this.props.scope; 

     var item = this.$scope.item; 

     return (
      <html here....> 
     ) 
    } 
}

然后算账，任何角度特定的标记都将被解析在componentDidMount方法

来源

2014-02-25 19:10:51

将角度绑定控制器添加到新范围

回答

相关问题