javascript - angular 指令内部事件如何改变外层scope值？

Question

我看了一下教程里，都是在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>
<p drc>click</p>

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

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

Answer 1

如果我记得没错的话 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();
    })
}

Answer 2

http://stackoverflow.com/questions/17561632/how-to-modify-scope-from-within-a-directive-in-angularjs

Answer 3

先试一下如下代码：

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

神奇么？