HTML中的$ scope变量在刷新时消失

时间:2016-09-30 02:22:59

标签: javascript html angularjs firebase firebase-realtime-database

我有一个范围变量,当它来自网站上的其他地方时,它应该正确显示。但是,如果刷新调用$ scope变量的html页面,则变量值将消失。

我的控制器看起来像这样:

  public class PrimaryFragment extends Fragment {
    RecyclerView rv;
    LazyAdapter adapter;
    ListView listView;
    View rootView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.primary_layout, container, false);


        ArrayList<AudioListModel> songsList = SongsManager.GetSongs();

        adapter = new LazyAdapter(getActivity(), songsList.toArray(new AudioListModel[songsList.size()]));
        //rv = (RecyclerView) rootView.findViewById(R.id.songs_recycleview);

        listView = (ListView) rootView.findViewById(R.id.SongList);
        LazyAdapter ad = new LazyAdapter(getActivity(), songsList.toArray(new AudioListModel[songsList.size()]));
              /*LazyAdapter ad = new LazyAdapter(getActivity(), songsList,
                new LazyAdapter.OnItemClickListener() {
                    @Override
                    public void onItemClick( View view, int position) {
                        Toast.makeText(getActivity(), "this is on click event", Toast.LENGTH_SHORT);
                    }
                });
        */
        listView.setItemsCanFocus(false);
        listView.setAdapter(ad);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getActivity(), "this is on click event", Toast.LENGTH_SHORT);
            }
        });


        return rootView;//inflater.inflate(R.layout.primary_layout, null);
    }

我的HTML看起来像这样:

angular.module('testApp')
 .controller('TestShowCtrl', function($scope, Ref, $routeParams) {
    //Get ID out of current URL
    var currentId = $routeParams.id;

    var ref = new Firebase(Ref + 'events').child(currentId);

    ref.on('value', function(snapshot) {
        var data = snapshot.val();
        console.log('data.title: ' + data.title);
        $scope.title = data.title;

    });
});

奇怪的是,虽然HTML没有显示变量,但在刷新后它仍会出现在控制台中。

1 个答案:

答案 0 :(得分:2)

从Firebase同步数据是一种异步操作。当数据从Firebase返回并将其绑定到范围时,AngularJS不再期待更改。因此,它不会立即更新UI,而是在下一个&#34;刷新周期&#34;

中更新。

要触发即时更新,请致电$apply()angular.module('testApp') .controller('TestShowCtrl', function($scope, Ref, $routeParams, $timeout) { //Get ID out of current URL var currentId = $routeParams.id; var ref = new Firebase(Ref + 'events').child(currentId); ref.on('value', function(snapshot) { $timeout(function() { var data = snapshot.val(); console.log('data.title: ' + data.title); $scope.title = data.title; })}); });

{{1}}