angular 指令内部事件如何改变外层scope值?

fishenal
  • 3.4k

我看了一下教程里,都是在template设置了 ng-model,我想如果model不设置,单纯的修改scope内部值,页面显示不刷新,为何?

var myMod = angular('myMod',[])

myMod.controller('ctl',function($scope){
    $scope.hello = 'hello'
})
.directive('drc',function(){
    return {
        link:function(scope,elem, attr){
            elem.click(function(){
                scope.hello = "www"
            })

        }
    }
})
<p>{{hello}}</p>
<div drc>click</div>

这样的话,我试下来click内部的scope.hello会改变,但是这个改变不会影响到外层hello的展现。好像link内部的scope只是外层$scope的一份拷贝。

请问我该如何实现我想要的这个功能?

回复
阅读 8k
3 个回答
Saviio
  • 250

如果我记得没错的话 Angular Directive里的scope属性有如下属性。

scope:false (default)
scope:true (自顶向下,继承一个子作用域)
scope:{} (实例化一个新的scope对象,创建一个隔离的作用域)

因为指令的本身就是为了创建可复用组件的,相对来说使用单独的、隔离的作用域会比较好,如果需要和外部的controller进行数据传递或者通讯,在dom上以及scope里对数据做一次双向绑定就可以了。

然后如果你就是希望直接在link里修改并且渲染的话。

link:function(scope,elem,attr){
    elem.bind('click',function(){
        scope[modelName]="new hello";
        scope.$apply();
    })
}

先试一下如下代码:

elem.click(function(){
    scope.hello = "www";
    scope.$apply(); 
});

神奇么?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏