Question

我正在尝试使用带有Angular的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加载一个额外的模板因为angular不会让我在指令实例化时加载一个动态模板。我觉得编译模板必须有比使用ng-include或ng-switch

更好的方法

// 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。

Answer 1

我现在没有设置角度应用程序，但您是否尝试使用函数返回基于本地$ 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'左右。

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

Answer 2

找到了一种方法来做我试图用React做的事情，包括我上面的相同反应代码，我保存了角度编译依赖并将其保存到角体并调用反应渲染如：

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')

然后使用react迭代器我调用了每个模板，并在模板安装后的每个模板中，我根据给定的选择器编译了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方法

中解析任何角度特定标记

Angular绑定控制器到新范围

2 个答案: