ng-include 不会每次使用 $scope 渲染部分视图

Question

内部视图我使用 ng-include 和 ng-if 有条件地呈现 html

 <div ng-controller="myController">
        <div ng-if="myProperty == 1">
            <div ng-include="'view1.html'"></div>
        </div>
        <div ng-if="myProperty == 2">
            <div ng-include="'view2.html'"></div>
        </div>
 </div>

在控制器内部我有 $scope.myProperty，它使用来自其他 js 对象的 $scope 注入在控制器内部接收值。在这个控制器上，我还有回调函数，它每 x 秒更新一次 $scope.myProperty。

app.controller('myController', function ($scope) {
   ...
        $scope.myProperty = 0; //init value
        function callback() {
            $scope.$apply(); // force update view
            // correctly write myProperty value on every data change
            console.log($scope.myProperty); 
        }
    var otherJsObject= new myObject($scope, callback);
    otherJsObject.work();
   ...
}

回调函数正确更改myProperty 值，但它不会每次都更新内部视图。

更新： $scope.bindUIProp = { a: $scope.myProperty};

    function callback() {
        $scope.$apply(); 
        $scope.bindUIProp.a = $scope.myProperty;            
        console.log('Callback  ' + $scope.myProperty);
        console.log('drawstage  ' + $scope.bindUIProp.a);

    }

    var otherJsObject= new myObject($scope, callback);
    otherJsObject.work();

在内部视图中我使用了对象属性

<div ng-controller="myController">
            <div ng-if="bindUIProp.a == 1">
                <div ng-include="'view1.html'"></div>
            </div>
            <div ng-if="bindUIProp.a == 2">
                <div ng-include="'view2.html'"></div>
            </div>
     </div>

这种方法在每次刷新页面时都有效，当 scope.bindUIProp.a 更改为 2 时，parial view 不会从 view1 更新到 view2。

Answer 1

而不是在根级别写入属性。在下面写一层。

而不是 $scope.myProperty，

使用 $scope.mp.myProperty

Answer 2

ng-if 和 ng-include 都创建子作用域。

由于在主范围内使用原语，您遇到了问题。基元没有继承，因此绑定在嵌套的子范围内被破坏。

把它改成一个对象：

$scope.myProperty = { someProp: 0};

我个人很少使用ng-include，因为它创建了子作用域。如果我只想包含一个模板，我更喜欢有自己的指令。