AngularJS - 本地指令和父範圍

我正在開始編寫指令，我很確定我掌握了爲指令定義「隔離」範圍的整個概念。AngularJS - 本地指令和父範圍

我的指示numberRoulette應該爲所提供的隨機數中的每個數字（或提供的數字通過屬性fields="some-number-here"）動畫。每經過一秒鐘，一位數字停止動畫並被設置爲其預期的數字。這是一個有點像老虎機..

<div ng-app="myApp"> 
    <div ng-controller="MasterCtrl"> 
    <span number-roulette fields="10" ng-model="number"> 
     {{number}} 
    </span> 
    </div> 
</div>

我遇到的問題是，當我做出指示範圍，由控制器MasterCtrl使用的範圍之間的雙向綁定，我的價值觀停止顯示。

app.directive('numberRoulette', function($timeout) { 
    return { 
    restrict: 'A', 
    scope: {showNumber: '=ngModel'}, 
    ... 
    }; 
}); 

function MasterCtrl($scope) { 
    $scope.number = 1000; 
}

的jsfiddle：http://jsfiddle.net/nguyening/aX6Zm/3/

來源

2013-01-08 actaeon

使用{{showNumber}}或移動{{number}}跨度之外。

在span中，您只能訪問指令作用域屬性（例如，showNumber），因爲爲該指令創建了隔離作用域。

在跨度之外，您可以訪問控制器範圍屬性，例如number。

更新：在這裏不需要ng模型。任何屬性都行，例如：

<span number-roulette fields="10" model="number">

然後在指令：

scope: {showNumber: '=model'},

來源

2013-01-08 22:19:04

工作的jsfiddle：http://jsfiddle.net/aX6Zm/4/ – pavelgj

+1，因爲這是正確的答案。但是，爲了完整性，你也可以使用transclusion。 –

根據@喬希的建議，這裏是一個jsfiddle使用替代：http://jsfiddle.net/mrajcok/aX6Zm/6/。有了這個解決方案，我們在範圍內使用'{{number}}'。 –

AngularJS - 本地指令和父範圍

回答

相關問題