Question

我有观点

<div ng-controller="DisplayController">
    <display-view style="width:{{model.width}}" value={{model.value}}</display-view>
</div>

鉴于我的控制器为

angularModule.controller("DisplayController",function($scope,$rootScope){
    $rootScope.model = DisplayModel;
    this.setInputValue = function(value){
        console.log($rootScope.model);
        $rootScope.model.value =  value;
        console.log($rootScope.model);
        $scope.model.value = $rootScope.model.value;
        $scope.$apply();
    }
});

模型为

var DisplayModel = {
    width:'193px',
    height:'25px',
    value:''
}

在某个元素上点击我调用setInputValue函数：

element.bind('click', function(event){
    console.log(event + '..event..');
    DispController.setInputValue(event.target.value);
});

display-view是

angularModule.directive('displayView',function(){

return {
    restrict: 'E',
    controller : "DisplayController",
    template: '<input type="text" style={{widthValue}} value={{value}}>',
    link:function(scope,element,attrs){
       scope.widthValue = attrs.style;
       scope.value = attrs.value;
    }
}

})

$ rootScope中的值未更新到视图。如何解决这个问题。

Answer 1

这里我们必须包含replace：true。这会将值和样式附加到display-view指令中的input元素。

angularModule.directive('displayView',function(){
  return {
  restrict: 'E',
  replace:true,
  template: '<input type="text">'
}
})

显示的其他方式是隔离范围

angularModule.directive('displayView',function(){
return {
restrict: 'E',
scope:{
widthValue: "@",
value : "@"
},
template: '<input type="text" style={{widthValue}} value={{value}}>',
link:function(scope,element,attrs){

}
}
})

即使rootscope具有值，范围值也不会更新

1 个答案: