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 - 本地指令和父范围

回答

相关问题