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视图不会从view1更新到view2。

Answer 1

ng-if和ng-include都会创建子范围。

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

将其更改为对象：

$scope.myProperty = { someProp: 0};

我个人很少使用ng-include，因为它创建了子范围。如果我想要的是包含模板，我更喜欢拥有自己的指令。

Answer 2

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

而不是$ scope.myProperty，

使用$ scope.mp.myProperty

每次使用$ scope时，ng-include都不会呈现部分视图

2 个答案: