Question

我有一个带分页的表的简单指令。 Pagination有一个下拉菜单。一个按钮。用户可以在下拉列表中选择页面，也可以单击按钮进行导航。比如，下拉列表列出了页码1,2,3，所选页面为1.当用户点击“下一步”时，下拉列表中的选定值应为2。

问题： 单击“下一步”时，虽然在控制台中看到范围变量SelectedPage已更新，但它未在视图中反映。

report.html：

<div>
<ul>       
   <li>
     <select ng-model="$scope.state.SelectedPage" ng-change="ShowPageResult()">
      <option ng-repeat="num in PageNumbers value="{{num}}">{{num}}</option>
     </select>
   </li>
   <li ng-click="ShowNextPage();"><a href=" #">Next</a></li>       
</ul>
<table>
...//some html
</table>
</div>

指令

app.directive('Report', function () {
    return {
        restrict: 'AE',            
        replace: 'true',
        templateUrl: '/views/report.html'            
    };
});

控制器：

$scope.state={};
$scope.ShowPageResult = function () {
        GetReport($scope.state.SelectedPage);
    }
$scope.ShowNextPage = function () {
        $scope.state.SelectedPage = $scope.state.SelectedPage + 1;                
        GetReport($scope.state.SelectedPage);
    }

//get report data to bind to table
function GetReport(pageNumber) {
        $scope.UserReport = [];

        var promise = ReportsFactory.GetData();
        promise.then(function (success) {
            if (success.data != null && success.data != '') {                
                $scope.UserReport = success.data;                
                BindPageNumbers($scope.UserReport[0].TotalRows, pageNumber);              
            }            
        },
        function (error) {
            console.log(error);
        });
    }

  //bind page numbers to dropdown in pagination
    function BindPageNumbers(totalRows, selectedPage) {        
        $scope.PageNumbers = [];
        $scope.LastPageNumber = Math.ceil((totalRows / 10));
        for (var i = 1; i <= Math.ceil((totalRows / 10)) ; i++) {
            $scope.PageNumbers.push(i);
        }
        $scope.state.SelectedPage = selectedPage; //can see the no. becomes 2 here.            
    }

Answer 1

我的猜测：

ng-change="ShowPageResult()"在指令模板中声明，因为你的指令声明了它自己的作用域，然后它在指令的作用域中查找ShowPageResult（）的定义，而不是在控制器中。

因此，更改处理程序函数为null并且不执行任何操作。

Answer 2

尝试将SelectedPage放入对象中。所以在你的控制器中

$scope.state = {
    SelectedPage: 1
};

您需要初始化SelectedPage。

然后在控制器和指令模板中使用SelectedPage引用state.SelectedPage：

<select ng-model="state.SelectedPage" ng-change="ShowPageResult()">

由于javascript原型继承，指令中的SelectedPage将与控制器中的BindPageNumbers不同。见Understanding Scopes

我不清楚为什么要将BindPageNumbers绑定到指令范围。首先，你的指令中没有控制器，因此它永远不会被调用，模板中也没有调用。其次，model.vocab[w].sample_int > model.random.randint(2**32)] Warning (from warnings module): File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 636 warnings.warn("C extension not loaded for Word2Vec, training will be slow. " UserWarning: C extension not loaded for Word2Vec, training will be slow. Install a C compiler and reinstall gensim for fast training. Exception in thread Thread-1: Traceback (most recent call last): File "C:\Python34\lib\threading.py", line 920, in _bootstrap_inner self.run() File "C:\Python34\lib\threading.py", line 868, in run self._target(*self._args, **self._kwargs) File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 675, in worker_loop if not worker_one_job(job, init): File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 666, in worker_one_job job_words = self._do_train_job(items, alpha, inits) File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 623, in _do_train_job tally += train_sentence_sg(self, sentence, alpha, work) File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 112, in train_sentence_sg word_vocabs = [model.vocab[w] for w in sentence if w in model.vocab and File "C:\Python34\lib\site-packages\gensim\models\word2vec.py", line 113, in <listcomp> model.vocab[w].sample_int > model.random.randint(2**32)] File "mtrand.pyx", line 935, in mtrand.RandomState.randint (numpy\random\mtrand\mtrand.c:9520) OverflowError: Python int too large to convert to C long没有绑定到父作用域，因此指令不会获得该函数。

指令中的范围变量未更新 - angularjs

2 个答案: