將角度綁定控制器添加到新範圍

我正在嘗試使用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

將角度綁定控制器添加到新範圍

回答

相關問題