嵌套指令不更新AngularJs中的视图(DOM)元素

时间:2017-01-12 19:55:15

标签: html angularjs angular-directive isolate-scope

我已经制作了一个嵌套指令,并尝试从html视图调用它,但没有更新html中的view元素。

我可以从调用控制器获取更新后的值,但无法在视图级别查看更新后的效果。

这是Js

 boolean firstLaunch = preferences.getBoolean("firstlaunch", true);

这是Html:

 boolean firstLaunch = preferences.getBoolean("firstLaunch", true);

Fiddle此处。

N.B:我尝试在指令和控制器中使用 // Code goes here "use strict"; var myApp=angular.module("myApp",[]); myApp.directive("selectDirective", [function () { return { restrict: "E", template: '<select class="form-control input-sm dropdown" data-ng-model="model.args.selectedItem" data-ng-options="item[model.args.displayField] for item in model.args.source" data-ng-change="model.itemChange(model.args.selectedItem)"><option value="">Select Any Item</option></select>', scope: { }, bindToController: { args: "=" }, link: function (scope, element, attrs) { var self = scope.model || {}; var initializeControl = function () { if (self.args == undefined) { self.args = {}; } if (self.args.method == undefined) { self.args.method = {}; } if (self.args.isDisabled == undefined) { self.args.isDisabled = false; } if (self.args.displayField == undefined) { self.args.displayField = ''; //alert('Display Field is blank for dropdown control.') } if (self.args.valueField == undefined) { self.args.valueField = ''; //alert('Value Field is blank for dropdown control.') } if (self.args.source == undefined) { self.args.source = {}; } if (self.args.hide == undefined) { self.args.hide = false; } } var assignMethod = function () { self.args.method = { setEnable: function (args) { self.args.isDisabled = !args; }, setVisible: function (args) { self.args.hide = !args; }, getText: function () { return self.args.selectedText; }, getValue: function () { return self.args.selectedValue; }, setItem: function (item) { if (item != undefined) { var index = self.args.source.indexOf(item); self.args.selectedText = item[self.args.displayField]; self.args.selectedValue = item[self.args.valueField]; self.args.selectedItem = item; self.args.selectedIndex = index; } } } } self.itemChange = function (item) { if (item != undefined) { var index = self.args.source.indexOf(item); self.args.selectedText = item[self.args.displayField]; self.args.selectedValue = item[self.args.valueField]; self.args.selectedItem = item; self.args.selectedIndex = index; } } initializeControl(); assignMethod(); }, controller: function () { }, controllerAs: 'model' } }]); myApp.directive("stateDirective", [function () { return { restrict: "E", template: '<select-directive args="model.args"></select-directive>', scope: {}, bindToController: { args: "=" }, link: function (scope, element, attrs) { var self = scope.model || {}; var initializeControl = function () { if (self.args == undefined) { self.args = {}; } var sourceList = [{ id: 1, name: "AA", value: "AA" }, { id: 2, name: "AB", value: "AB" }, { id: 3, name: "ABD", value: "ABD" }, { id: 4, name: "ABE", value: "ABE" }, { id: 5, name: "ACT", value: "ACT" }, { id: 6, name: "AE", value: "AE" }]; self.args.source = sourceList; self.args.displayField = 'name'; self.args.valueField = 'value'; }(); }, controller: function () { }, controllerAs: 'model' } }]); myApp.controller("homeController", ['$interval', function ($interval) { var self = this; var initializeControl = function () { self.state1 = {}; self.state2 = {}; self.ClickMe = function () { debugger; aler(1); self.state2.method.setItem(self.state1.selectedItem); } self.ClickMe2 = function () { debugger; aler(1); var x1 = self.state1; var x2 = self.state2; } }; $interval(function () { }, 500); initializeControl(); }]); <div class="cold-md-12" ng-controller="homeController as model"> <h1>Home Page</h1> <state-directive args="model.state1"></state-directive> <br /> <input type="button" value="ClickMe" data-ng-click="model.ClickMe()" /> <state-directive args="model.state2"></state-directive><br /> <input type="button" value="Submit" data-ng-click="model.ClickMe2()" /> </div> ,但是没有用。

2 个答案:

答案 0 :(得分:0)

如果scope.model未初始化,则会在链接功能中为{}分配self。但是你从来没有把它放在控制器上。如果scope.model存在,你就没问题了,因为你将所有内容绑定到控制器上,控制器绑定到范围,但如果它不是错误的话。我猜是正在发生的事情。

虽然,如果我可能如此大胆,我会说命名控制器模型是非常误导。因为在开发领域,模型和控制器是两个非常不同的东西。

干杯, 亚伦

答案 1 :(得分:0)

刚刚在track by添加了ng-option

我只是更改data-ng-options值 来自

item[model.args.displayField] for item in model.args.source

item[model.args.displayField] for item in model.args.source track by item[model.args.valueField] 

它完美无缺。