angularjs - 即使根范围具有值，范围值也不会更新

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);
});

显示视图是

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 指令中的输入元素。

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){

}
}
})