我已经制作了一个嵌套指令,并尝试从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>
,但是没有用。
答案 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]
它完美无缺。