函数不在不同视图上执行

时间:2015-10-14 10:19:46

标签: angularjs function angularjs-scope

我是 angular JS 的新手。我使用 ngRoute 创建了一个简单的页面。 在第一个视图中,我有一个表,并在点击它时重定向到第二个视图。 但是我使用ng-click调用了两个函数,changeView函数运行正常。但是第二个函数无法在第二个视图上执行。 但如果在第一个视图上使用它,它的运行正常 下面是第一个视图的代码 的 Angular.php

<div ng-app="myApp" ng-controller="dataCtr">
<table class='table table-striped'>
<thead>
<tr>
<td>Title</td>
<td>Stream</td>
<td>Price</td>
</tr>
 </thead>
 <tbody> 
 <tr ng-repeat = "x in names | filter:filtr | filter:search"  ng-click="  disp(x.id);changeView()">

 <td >{{ x.Title }}</td>
 <td>{{ x.Stream }}</td>
 <td>{{ x.Price }}</td>

</tr>
</tbody>
</table>
</div>

继承人的第二个观点 的 details.php

  <div ng-app="myApp" ng-controller="dataCtr"> 
 <div class="container">
 SELECTED:<input type="textfield" ng-model="stxt">
</div>
</div>

继承人 js档案

    var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
    .when('/angular', {
        templateUrl: 'angular.php',
        controller: 'dataCtr'
    })
    .when('/details', {
        templateUrl: 'details.php',
        controller: 'dataCtr'
    })
    .otherwise({
        redirectTo: '/angular'
    });
});
 app.controller('dataCtr', function($scope ,$http ,$location ,$route ,$routeParams) {
$http({
 method: "GET",
 url: "json.php"})
.success(function (response) {$scope.names = response;});     
$scope.changeView = function()
{
  $location.url('/details');
};

$scope.disp = function(id)
{
  $scope.stxt = $scope.names[id-1].Title;
};
});

disp函数在角度视图上正常工作。但不是在第二个视图上路由。我认为在ng click中调用两个视图的语法是正确的。或者,如果有任何其他方法将关联的表格单元格值调用到第二个视图。请帮助。

2 个答案:

答案 0 :(得分:1)

经过大量研究后,我发现了它。我使用了工厂服务

app.factory('Scopes', function ($rootScope) {
var mem = {};
return {
    store: function (key, value) {
        $rootScope.$emit('scope.stored', key);
        mem[key] = value;
    },
    get: function (key) {
        return mem[key];
    }
};
});

将此添加到JS。 因为范围在第二个控制器上丢失,所以服务帮助我们保留范围值并在不同的控制器中使用它们。从第一个控制器存储范围

app.controller('dataCtr', function($scope ,$http ,$location,$rootScope,Scopes) {
Scopes.store('dataCtr', $scope); 
//code
});

并加载到借调的控制器中。

app.controller('dataCtr2', function($scope ,$timeout,$rootScope,Scopes){
$scope.stxt = Scopes.get('dataCtr').disp;
});

答案 1 :(得分:0)

第二个视图无效,因为您无法使用$ scope。$ apply()方法。 $ apply()用于从角度框架外部以角度执行表达式。$ scope。$ apply()在您更改位置后立即知道事情发生了变化。

更改以下代码部分,再试一次

$location.path('/detail');
 $scope.$apply();